<!--
   ConstructQ — Task (Mobile) v21.0
   Date: 3 ก.ค. 2569 (2026-07-03)
   Owner: วุธ (PM/SA)

   Changes from v20.0 · Section Tabs on Checklist Exec:
     1) กด "เริ่มตรวจ Checklist" · เห็น Tab หมวดหมู่ที่ด้านบน
        · Tab strip · scroll แนวนอน · scrollbar teal มองเห็น
        · Tab แสดง "A · งานเตรียมพื้นที่และฐานราก · 4 ข้อ"
                    "B · คุณภาพเสาเข็ม · 3 ข้อ"
     2) ใต้ Tab · stepper วงกลม + ✓ เหลือง (v20.0) แสดง
        เฉพาะรายการในหมวดที่เลือก
     3) Navigation:
        · ปุ่มถัดไปในข้อสุดท้ายของหมวด → กระโดดไปหมวดถัดไป
        · ปุ่มย้อนกลับในข้อแรกของหมวด → กระโดดไปข้อสุดท้ายของหมวดก่อน
        · ปุ่มบันทึกโผล่เมื่ออยู่ข้อสุดท้ายของหมวดสุดท้าย
     4) State model:
        · state.ckSectionIdx (index หมวดที่เลือก) · default 0
        · state.cklIdx (index ในหมวดปัจจุบัน) · default 0
        · state.cklSet/cklComments เดิม (คีย์ = item code · ไม่เปลี่ยน)
     5) preserved · Pass/Fail 2 ปุ่ม · ✓ badge · NCR Confirm ·
        GPS · Language toggle · Task list · Detail
-->
<!--
   ConstructQ — Task (Mobile) v22.0
   Date: 3 ก.ค. 2569 (2026-07-03)
   Owner: วุธ (PM/SA)

   Changes from v21.0 · BUG FIX:
     · หน้าจอ Checklist Exec ไม่แสดง (blank) หลังกด "เริ่มตรวจ Checklist"
     · Root cause: v21.0 build script ลบท่อน `const headerHtml = ...` และ
       completion screen check `if(remainingCount === 0) { ... return; }`
       ออกไปโดยไม่ได้ตั้งใจ · ทำให้ตอน return referenced `headerHtml`
       เป็น undefined variable → ReferenceError → app แครช
     · Fix: เพิ่ม headerHtml + completion screen check กลับมาก่อนบรรทัด
       "// v20.0 — Show ALL items"
     · ทุก feature v21.0 ยังอยู่ · Tab strip · Per-section stepper ·
       ✓ badge · Pass/Fail 2 ปุ่ม · NCR confirm
-->
<!--
   ConstructQ — Task (Mobile) v23.0
   Date: 3 ก.ค. 2569 (2026-07-03)
   Owner: วุธ (PM/SA)

   Changes from v22.0 · Q/A UI ตรงกับ Checklist Template v16.0 Mobile Preview:
     1) Rule chip 📏 · แสดงกฎ/เกณฑ์ของข้อ · sev + auto_ncr/warn chip
     2) Type-aware widgets · ครบ 10 ประเภท:
        passfail · number+unit · radio · checkbox · text · longtext ·
        photo · date · signature · color
     3) ขยาย ALL_ITEMS · แต่ละข้อมี type + ruleTh/En + unit/options + onFail
        · ครอบคลุมทุกประเภทคำถามใน 3 หมวด · 9 ข้อ
     4) State ใหม่ · state.cklAnswers[code] = widget value (ทุก type)
        · state.cklSet[code] เก็บ marker: 'pass'|'fail'|'answered'
        · ✓ badge · แสดงเมื่อ state.cklSet[code] truthy (ไม่จำกัด pass/fail)
     5) preserved · Tab strip · Circle stepper · Back nav · NCR confirm ·
        Photo · Comment · GPS · Language toggle
-->
<!--
   ConstructQ — Task (Mobile) v24.0
   Date: 3 ก.ค. 2569 (2026-07-03)
   Owner: วุธ (PM/SA)

   Changes from v23.0 · QCM Create Task overhaul:
     1) Task Name (EN) field · ลบออก
     2) Task Name (TH) → เปลี่ยนเป็น "ชื่อ Task"
     3) Task Code · เพิ่ม Auto/Manual switch (เหมือน Web v40.0)
     4) ไซต์/โซน · ปุ่มเปิด Popup ใหม่ · แสดง hierarchy Site → Zone
     5) WBS · ปุ่มเปิด Popup ใหม่ · แสดง hierarchy L1 → L2 → L3 · guard เลือกได้เฉพาะ L3
     6) หัวข้อ "มอบหมาย Inspector" → เปลี่ยนเป็น "มอบหมาย"
     7) QC Inspector → "ผู้ตรวจสอบคุณภาพงาน" · ปุ่มเปิด Popup · แสดงคนใน role
        พร้อม workload count (คล้าย Web v40.0 TmAssigneePicker)
     8) เพิ่มฟิลด์ "ผู้อนุมัติ" · Picker popup แบบเดียวกัน · แสดง QC Manager + PM
     · state.createForm เก็บค่าฟอร์ม + selection ระหว่าง popup
     · State: state.showPicker · state.createForm
-->
<!--
   ConstructQ — Task (Mobile) v26.0
   Date: 6 ก.ค. 2569 (2026-07-06)
   Owner: วุธ (PM/SA)

   Changes from v25.0 · Project picker · mobile-app native redesign:
     - Hero card ที่ด้าน top · แสดงโครงการที่กำลังเลือก (ถ้ามี)
       พร้อม circular progress ring · status badge · contract value
     - Filter chips row · ทั้งหมด · กำลังดำเนินการ · ใกล้เสร็จ · เพิ่งเริ่ม
     - Enhanced project cards:
        · Gradient banner header (color-per-project) + code chip
        · ชื่อโครงการ font ใหญ่ 15pt · location line มี icon
        · Status badge (กำลังดำเนินการ / ใกล้เสร็จ / เพิ่งเริ่ม)
        · Contract value chip (M ฿)
        · Icon stat grid (4 stats: ไซต์ · Active Tasks · Progress % · Target)
        · Circular progress ring (SVG · 48px) แทน bar
        · Selected state: teal border + shadow + ✓ badge มุมขวาบน
     - New state: state.projectFilter (all/active/near/recent)
     - CT_PROJECTS extended: + status, contractValue, targetDate, color, startedDaysAgo

   Preserved from v25.0:
     · ทุก picker อื่น (Site/Zone · WBS · Inspector · Approver) เหมือนเดิม
     · Search bar · sort chips · empty state · slide-in-right
     · Task Code auto/manual · ชื่อ Task · สร้าง Task workflow
-->
<!--
   ConstructQ — Task (Mobile) v34.0
   Date: 6 ก.ค. 2569 (2026-07-06)
   Owner: วุธ (PM/SA)

   Change from v33.0 · WBS L1 tabs overflow scrollbar:

     ปัญหา v33.0:
       - L1 category tabs (.pk-wbsm-l1s) มี 3 อัน (Struct/Finishing/MEP)
         แต่ pill กว้าง 150px+ · รวม gap → เกิน 430px ล้น phone width
       - CSS มี overflow-x:auto ให้ scroll ได้จริง
       - แต่ scrollbar-width:none + hidden webkit scrollbar → ผู้ใช้ไม่รู้ว่าเลื่อนได้

     Fix v34.0:
       1) แสดง scrollbar บาง teal (height 4px) ที่ล่าง L1 pills row
          · เห็นชัดว่าเลื่อนได้ · ตำแหน่ง scrollbar ไม่กินพื้นที่มาก
       2) Padding-bottom เพิ่ม 4px รองรับ scrollbar
       3) Scroll hint chip · "→ เลื่อนดูหมวดหมู่อื่น" · แสดงใต้ pills
          · เมื่อ L1 count > 2 (ให้ผู้ใช้รู้ว่ามีให้เลื่อน)
       4) Apply same visible scrollbar to:
          · .pk-modal-sites (Site pills · v31)
          · .pk-dd-chips (Project dropdown chips · v29)
          · .pk-sort (Sort chips · v25)
          · .pk-project-filters (v26 filters · unused but safe)
       5) Fade gradient ด้านขวา · เผยว่ามี content ล้นไปทางขวา

   Preserved:
     · Bottom sheet modal (WBS v33 · Site/Zone v31)
     · Project inline dropdown (v29)
     · Full-screen Person picker (v25)
     · Create Task workflow · all state
-->
<!--
   ConstructQ — Task (Mobile) v35.0
   Date: 21 ก.ค. 2569 (2026-07-21)
   Owner: วุธ (PM/SA)

   Changes from v34.0 · QCM Approve — Summary + guarded Save:

     ปัญหาเดิม (v34.0):
       - บทบาท QC Manager (qcm) กดปุ่ม "✓ อนุมัติผลตรวจ" ในหน้า Detail
       - v34.0 แสดง toast แล้วจบ · ไม่มีการยืนยันหรือสรุปข้อมูล
       - เสี่ยงต่อการอนุมัติงานที่ยังตรวจไม่ครบ (มี Checklist ที่ยัง fail/pending)

     Fix v35.0:
       1) เปลี่ยน ROLE_ACTIONS.qcm[0] จาก toast → goto {screen:'qcmReview'}
       2) เพิ่มหน้าใหม่ 'qcmReview' · แสดงภาพรวมงานก่อนบันทึกอนุมัติ:
          · Header: task code + title + owner (Inspector)
          · Stat pills: ผ่าน / ไม่ผ่าน / ยังไม่ตรวจ / NCR ที่ยังเปิด
          · แสดง Checklist ทุกข้อ · แยกตามหมวด (Section) พร้อม verdict badge
          · แสดง NCR ที่ยังเปิด (nคr_open · ncr_fixing · ncr_verify)
          · Note field · comment ก่อนอนุมัติ
          · Submit bar: ยกเลิก + ยืนยันอนุมัติ
       3) Guarded Save behavior:
          · ถ้ามี checklist item ที่ verdict !== 'pass' (fail/pending/warn)
            → กด "ยืนยันอนุมัติ" → เปิด Alert Modal (สีแดง) พร้อม:
              "❌ ไม่สามารถอนุมัติได้"
              "ยังมี Checklist ที่ตรวจไม่ผ่าน N รายการ · โปรดให้ Inspector ตรวจซ้ำก่อนอนุมัติ"
              ปุ่ม "รับทราบ" (close alert · stay on screen)
          · ถ้าทุกข้อ pass และไม่มี NCR เปิด
            → กด "ยืนยันอนุมัติ" → เปิด Confirm dialog (สีเขียว)
              "✓ ยืนยันอนุมัติผลตรวจ"
              "Task จะเปลี่ยนสถานะเป็น DONE"
              ปุ่ม "ยกเลิก" + "ยืนยัน"
          · กด "ยืนยัน" → toast "อนุมัติเรียบร้อย" → back to list

     Preserved:
       - ทุก feature v34.0 · WBS L1 scrollbar · Site/Zone bottom sheet
       - Project inline dropdown · Full-screen Person picker
       - Checklist wizard · NCR create flow · Lifecycle tab
-->
<!--
   ConstructQ — Task (Mobile) v45.0
   Date: 22 ก.ค. 2569 (2026-07-22)
   Owner: วุธ (PM/SA)

   Changes from v44.0 · QCM role · ตัดปุ่ม "ส่งกลับให้ตรวจซ้ำ" ออก:

     Task Overview tab (QCM role):
       · เดิม v44 มี 3 ปุ่ม:
         1) ✓ อนุมัติผลตรวจ  (act:'qcm-direct-approve' · disabled unless passRate=100)
         2) ↩ ส่งกลับให้ตรวจซ้ำ (act:'open-reassign-task-modal')
         3) ⚠ ดู NCR (goto tab:ncr)
       · ใหม่ v45.0 · ตัดปุ่มที่ 2 ออก · เหลือ 2 ปุ่ม:
         1) ✓ อนุมัติผลตรวจ
         2) ⚠ ดู NCR

     เหตุผล:
       · Reassign flow ยังคงเข้าได้จาก NCR Detail → "แก้ไข+มอบหมายใหม่" (v42+)
       · ไม่ต้องมี shortcut ที่ Overview level แล้ว
       · ลด clutter ของ action buttons

   Preserved from v44.0:
     · ปุ่ม Approve pass-rate gate (Pass Rate = 100% ถึงกดได้)
     · Combined Edit Modal (3 sections · owner dropdown) ทำงานเหมือนเดิม
     · Sub/Field NCR Detail ปุ่ม "แก้ไข NCR"
     · ทุก workflow transition ตรงตาม wf-ncr-loop
     · Reassign Modal · handlers · CT_SUBS · ทั้งหมดยังใช้ได้ (เผื่ออนาคต)
-->
<!--
   ConstructQ — Task (Mobile) v44.0 (superseded by v45.0 above)
   Changes from v43.0 · Sub / Field / engineer role button cleanup:

     1) หน้า Task Overview (บทบาท Field/Sub):
        · เดิม v43 มี 2 ปุ่ม: "⚠ ดู NCR ที่ต้องแก้" + "📤 ส่งผลแก้ไข"
        · ใหม่ v44 · ตัดปุ่ม "ส่งผลแก้ไข" ออกจาก ROLE_ACTIONS.engineer
        · เหลือแค่ปุ่ม "ดู NCR ที่ต้องแก้" · Sub เข้าดูรายการก่อน แล้วค่อยแก้จาก NCR Detail
        · ลดการซ้ำซ้อนของ action + บังคับให้ Sub เข้าใจว่าการแก้ต้องเปิด NCR ทีละใบ

     2) หน้า NCR Detail (บทบาท Field/Sub):
        · เดิม v43 ปุ่ม "📤 ส่งผลการแก้ไข" · goto submit screen
        · ใหม่ v44 rename เป็น "📝 แก้ไข NCR" (icon เปลี่ยน 📤 → 📝)
        · Action ยังคง goto submit screen (Sub อัพโหลด after photos + save)
        · ขยายเงื่อนไข: แสดงปุ่มทั้งเมื่อ NCR status = 'open' หรือ 'fixing'
          (v39+ NCR ตั้งต้น 'fixing' หลัง Sub รับ · ต้องแสดงปุ่มด้วย)

   Preserved from v43.0:
     · QCM Edit Modal · 3 sections · dropdown owner picker · date input
     · ทุก workflow transition ตรงตาม wf-ncr-loop
     · Reassign Modal · Pass Rate gate on Approve
-->
<!--
   ConstructQ — Task (Mobile) v43.0 (superseded by v44.0 above)
   Changes from v42.0 · Owner picker (Section 2) เปลี่ยนเป็น Dropdown:

     ปัญหาเดิม (v42.0):
       · Section 2 ใน Edit Modal แสดงรายการ Sub Contractor แบบ card list
         ทั้ง 5 คน · Modal ยาวมาก · ผู้ใช้ต้องเลื่อนหน้าจอ
       · UX ไม่ตรง requirement · user ต้องการ dropdown

     Fix v43.0:
       1) เปลี่ยน Section 2 จาก card list → Dropdown trigger button
          · แสดง avatar + ชื่อ + role + workload chip ของคนที่เลือกปัจจุบัน
          · ลูกศร ▼ / ▲ ระบุสถานะปิด/เปิด
       2) กด dropdown → เปิด panel รายชื่อ (embed อยู่ใน section เดียวกัน)
          · เห็นทุกคน พร้อม workload chip + spec + overdue
          · เรียงจากงานน้อย → มาก เหมือนเดิม
       3) เลือกใครก็ได้ → dropdown ปิดอัตโนมัติ · trigger update
       4) State ใหม่: state.editNcrModal.ownerDropdownOpen (bool)
       5) Handler ใหม่: toggle-edit-ncr-owner-dropdown
       6) pick-edit-ncr-owner: ปิด dropdown หลังเลือก

   Preserved from v42.0:
     · Section 1 (แนวทางแก้ไข TH+EN) · Section 3 (วันกำหนดแก้ date picker)
     · Save handler รวมทุก field · Toast + Notification
     · CT_SUBS · 5 Sub Contractors · workload metadata
     · ปุ่ม "แก้ไข+มอบหมายใหม่" เดียว
-->
<!--
   ConstructQ — Task (Mobile) v42.0 (superseded by v43.0 above)
   Changes from v41.0 · NCR Detail QCM · Combined Edit + Reassign Modal:

     Requirement: รวมปุ่ม "แก้ไข" + "มอบหมายใหม่" เป็นปุ่มเดียว
                  "แก้ไข+มอบหมายใหม่" · เปิด modal แก้ไขได้ 3 อย่าง:

       1) แนวทางแก้ไข (correctTh + correctEn)
       2) ผู้รับผิดชอบ (owner) · เลือกจากรายชื่อ Sub Contractor พร้อม workload
       3) วันกำหนดแก้ (due date) · date picker

     Implementation:
       · New CT_SUBS constant · 5 Sub Contractors + workload metadata
       · New state.editNcrModal = { ncrId, tempCorrectTh, tempCorrectEn,
         tempOwnerEmail, tempDue }
       · renderEditNcrModal() · 3 sections + inline live-selection
       · Old renderEditCorrectiveModal() + Reassign-from-NCR paths kept
         defined but no longer wired to NCR Detail buttons (backward-compat)
       · Save handler updates NCR + shows notification toast

     Sub Contractor picker (Section 2):
       · Card-style rows · avatar + name + role + workload chip + spec
       · Tap card = select (highlighted with brand border + ✓ badge)
       · Sort by activeTasks ascending (least loaded first)

     Preserved:
       · Reassign Modal (from QCM Return button) unchanged
       · ทุก workflow transition · Pass Rate 100% gate on Approve
-->
<!--
   ConstructQ — Task (Mobile) v41.0 (superseded by v42.0 above)
   Changes from v40.0 · NCR Detail QCM · Reassign notif + Edit corrective:

     1) ปุ่ม "มอบหมายใหม่" (NCR Detail · QCM):
        · เดิม v37-v40 · เปิด Reassign Modal ทำงานได้ปกติ
        · ใหม่ v41.0 · เมื่อกดเลือก inspector ใน NCR context:
          - NCR.inspector = อีเมล inspector ใหม่ · owner ไม่เปลี่ยน
            (v40 เผลอเปลี่ยน owner ผิด · แก้แล้ว)
          - Toast แจ้ง "เปลี่ยน Inspector · ส่ง Notification แจ้งเตือน [ชื่อ] แล้ว"
          - state.reassignSentNotif เก็บชื่อ inspector · เพื่อโชว์ badge
            🔔 "ส่ง Notification แจ้ง [ชื่อ] แล้ว" ที่หน้า list
          - Task state ยังคง flow ตามเดิม (assigned + pin top)

     2) ปุ่ม "แก้ไข" (NCR Detail · QCM):
        · เดิม v40 · toast อย่างเดียว · ไม่ได้แก้ไขจริง
        · ใหม่ v41.0 · เปิด "Edit Corrective Modal" ให้ QCM แก้ไข
          - Textarea 2 ช่อง: แนวทางแก้ไข (TH) + Corrective Action (EN)
          - ปุ่ม "บันทึก" → update NCR.correctTh + correctEn
          - ปุ่ม "ยกเลิก" หรือ ✕ → ปิด modal ไม่บันทึก
          - Toast แจ้ง "บันทึกแนวทางแก้ไข NCR แล้ว · Notify Sub + Inspector"

   Preserved from v40.0:
     · ปุ่ม Return always clickable + fix X modal close
     · Approve gate ที่ Pass Rate = 100%
     · Reassign Modal · pick "เลือก" button · task→assigned + pin top
     · ทุก workflow transition ตรงตาม wf-ncr-loop template
-->
<!--
   ConstructQ — Task (Mobile) v40.0 (superseded by v41.0 above)
   Changes from v39.0:

     1) ปุ่ม "ส่งกลับให้ตรวจซ้ำ" (QCM · Overview tab):
        · เดิม v38-v39 · ปุ่ม disabled เมื่อ Pass Rate < 100%
        · ใหม่ v40.0 · ปุ่ม "กดได้เสมอ" · ไม่ผูกกับ Pass Rate อีกต่อไป
        · กด → เปิด Reassign Modal · เลือก QC Inspector + workload
        · เลือกแล้ว → Task state = "มอบหมายแล้ว" (assigned)
        · กลับหน้าหลัก · task pin ที่แถวบนสุด (green pulse)

     2) Icon X (ปุ่มปิด Modal):
        · Root cause · v37-v39 ใส่ onclick="event.stopPropagation()"
          ไว้ที่ .rm-sheet เพื่อป้องกันคลิกในแผ่นแล้วปิด modal
        · ผลข้างเคียง · event ไม่ไปถึง document-level click delegate
          → ปุ่ม X + "เลือก" กดไม่ตอบสนอง
        · Fix v40.0:
          - ลบ onclick=stopPropagation ออกจาก .rm-sheet
          - close handler ตรวจ backdrop-vs-inside อยู่แล้ว · ยังใช้ได้ปกติ
          - เพิ่ม e.stopPropagation ในแต่ละ handler ของ modal เพื่อความชัดเจน

     ปุ่ม Approve (อนุมัติผลตรวจ) ยังคง gate ที่ Pass Rate = 100%
     · เพราะเป็น action สุดท้ายของ workflow (t-9 review → done)
     · เหมือน v36+ · ไม่แตะ

   Preserved from v39.0:
     · ทุก workflow transition ตรงตาม wf-ncr-loop template
     · Role visibility · state mapping · handler transitions
     · Reassign Modal · explicit "เลือก" button per row · pin-top
-->
<!--
   ConstructQ — Task (Mobile) v39.0 (superseded by v40.0 above)
   Changes from v38.0 · Align role/state transitions with Template Workflow
   "Workflow มาตรฐาน + รอบแก้ NCR" (wf-ncr-loop) จาก WorkflowLifecycle_v5.0:

     wf-ncr-loop reference (8 steps · 10 transitions · 3 roles):
       s-1 created     · QCM              · SLA 4h
       s-2 assigned    · QCM              · SLA 8h
       s-3 in_progress · QC Inspector     · SLA 24h
       s-4 ncr_open    · QC Inspector     · SLA 2h
       s-5 ncr_fixing  · Sub Contractor   · SLA 48h
       s-6 ncr_verify  · QC Inspector     · SLA 8h
       s-7 review      · QCM              · SLA 12h
       s-8 done        · —                · SLA 0h

     Transitions:
       t-1 created→assigned    (auto)
       t-2 assigned→in_progress(auto)
       t-3 in_progress→ncr_open(fail · พบ Defect)
       t-4 ncr_open→ncr_fixing (auto · Sub รับ NCR)
       t-5 ncr_fixing→ncr_verify (pass · Sub ส่งการแก้)
       t-6 ncr_verify→ncr_fixing (fail · ไม่ผ่าน → แก้ใหม่)
       t-7 ncr_verify→in_progress (pass · อนุมัติ · NCR ปิดอัตโนมัติ)
       t-8 in_progress→review  (pass · ตรวจครบ)
       t-9 review→done         (pass · อนุมัติ)
       t-10 review→assigned    (fail · ไม่ผ่าน → มอบหมายใหม่)

     Role visibility (list filter) — aligned to workflow:
       · QCM        เห็น: assigned · review · ncr_open (ครอบ s-1..s-2, s-7)
       · Inspector  เห็น: assigned · in_progress · ncr_verify (s-2..s-3, s-6)
       · Sub (engineer) เห็น: ncr_open · ncr_fixing (s-4..s-5)
                    v38 มี ncr_verify (ผิด · แก้แล้ว)

     State transitions in handlers — aligned:
       submit-checklist  (Inspector · s-3) : task → review (t-8 pass)
       submit-resolution (Sub · s-5)       : task → ncr_verify (t-5 pass)
       ncr-pass          (Inspector · s-6) : task → in_progress (t-7 pass) · NCR closed
       ncr-reject        (Inspector · s-6) : task → ncr_fixing (t-6 fail) · NCR → fixing
       qcm-direct-approve (QCM · s-7)      : task → done (t-9 pass)    · [v38 already correct]
       pick-reassign-inspector (QCM · s-7) : task → assigned (t-10 fail)· [v38 already correct]

   Preserved from v38.0:
     · QCM Approve + Return · pass-rate 100% gate + hint text
     · Reassign Modal · explicit "เลือก" button per row + pin-top on list
-->
<!--
   ConstructQ — Task (Mobile) v38.0 (superseded by v39.0 above)
   Changes from v37.0:

     1) ปุ่ม "ส่งกลับให้ตรวจซ้ำ" (QCM · Overview tab):
        · เดิม v37 กดได้เสมอ · ใหม่ v38.0 · pass-rate gate เหมือนปุ่ม Approve
        · Pass Rate < 100% → disabled (สีเทา · pointer-events:none)
          พร้อม hint text "Pass Rate 45% · ยังไม่ครบ 100%" ใต้ปุ่ม
        · Pass Rate = 100% → enabled → เปิด Reassign Modal เดิม
        · เลือก inspector → Task state = "มอบหมายแล้ว" (assigned)
          กลับหน้า list · task pin ที่แถวบนสุด (พร้อม pulse เขียว)

     2) Reassign Modal (จากทั้ง 2 ทาง · "ส่งกลับให้ตรวจซ้ำ" + NCR Detail "มอบหมายใหม่"):
        · เดิม v37 กดที่ row ก็เลือก inspector ทันที (implicit)
        · ใหม่ v38.0 · แต่ละ row มีปุ่ม "เลือก" ชัดเจนทางขวา (explicit)
        · การกดที่ row จะไม่มีผล · ต้องกดปุ่ม "เลือก" เท่านั้น
        · ลด mis-tap · ให้ user มั่นใจว่ากำลังเลือกใคร

   Preserved from v37.0:
     · ปุ่ม "อนุมัติผลตรวจ" pass-rate gate + task→done + list
     · Reassign Modal · task→assigned + list pin top + green pulse
     · QCM list filter รวม 'assigned' state
-->
<!--
   ConstructQ — Task (Mobile) v37.0 (superseded by v38.0 above)
   Changes from v36.0 · Reassign refactor as Modal + assigned state + pin-top:

     1) ปุ่ม "อนุมัติผลตรวจ" (QCM · Overview tab):
        · ยังคงเงื่อนไข v36 · Pass Rate < 100% → disabled
        · Pass Rate = 100% → toast + Task state = "เสร็จสิ้น" (done) + กลับ list

     2) ปุ่ม "ส่งกลับให้ตรวจซ้ำ" (QCM · Overview tab):
        · เดิม v36 เปิด NCR tab · ใหม่ v37.0 เปิด "Modal" รายชื่อ QC Inspector ทันที
        · Modal แสดง avatar/ชื่อ/role/workload chip พร้อม activeTasks/nextFree
        · เรียงจากงานน้อยที่สุด · กดเลือก → Task state = "มอบหมายแล้ว" (assigned)
        · Toast → กลับหน้าหลัก (list) · task ที่พึ่งมอบหมายอยู่รายการแรก (pin top)

     3) NCR Detail page (จาก NCR tab → กดดูรายละเอียด):
        · ปุ่ม "มอบหมายใหม่" (QCM only) เปลี่ยนจาก toast → เปิด Modal เดียวกัน
        · flow เหมือนข้อ 2 · Task state = "มอบหมายแล้ว" · กลับ list · pin top

     4) List (QCM role):
        · เพิ่ม state 'assigned' ในตัวกรอง (เดิมมีแค่ review + ncr_open)
        · Sort: task ที่มี code = state.pinnedTaskCode อยู่แถวบนสุด
        · Highlight บาง เขียว pulse 3 วิ ระบุว่าเป็นรายการที่พึ่งมอบหมาย

   Removed from v36.0:
     · "หน้าเต็มจอ" inspectorReassign screen · แทนด้วย Modal ในหน้าเดิม
     · NCR-tab-list reassign button · ย้ายไป NCR Detail page ตามข้อกำหนด

   Preserved:
     · Everything from v18-36 · Checklist wizard · NCR create · WBS modal
-->
<!--
   ConstructQ — Task (Mobile) v36.0  (superseded by v37.0 above)
   Changes from v35.0 · QCM Approve gate + NCR Reassign flow:

     1) ปุ่ม "อนุมัติผลตรวจ" (QCM · Overview tab):
        · ถ้า Pass Rate ไม่ 100% → ปุ่ม disabled (สีเทา · กดไม่ได้)
        · ถ้า Pass Rate = 100% → ปุ่ม enabled → กดแล้ว toast "อนุมัติเรียบร้อย · Task → DONE"
        · ไม่มีหน้า Summary กลาง (qcmReview) อีกแล้ว · ตัดออก
        · ถ้าปุ่ม disabled แสดง tooltip: "Pass Rate ยังไม่ครบ 100%"

     2) ปุ่ม "ส่งกลับให้ตรวจซ้ำ" (QCM · Overview tab):
        · เดิม (v35.0) แค่ toast · ใหม่ v36.0 เปิด NCR tab อัตโนมัติ
        · ใน NCR tab · แต่ละ NCR item มีปุ่มใหม่ "มอบหมายใหม่" (สำหรับ role=qcm)
        · กด "มอบหมายใหม่" → เปิดหน้าใหม่ 'inspectorReassign'
          · แสดงรายชื่อ QC Inspector ทั้งหมด · workload chip (free/med/busy)
          · แสดง activeTasks · nextFree · overdue counter
          · กดเลือก inspector → toast "มอบหมายใหม่เรียบร้อย · Workflow: NCR → NEEDS_REINSPECT"
          · Workflow เปลี่ยน: NCR.inspector = new · NCR.status = 'reinspect' · Task.state = 'in_progress'
          · กลับหน้า NCR tab พร้อม NCR แสดง status ใหม่

     3) State + handlers ใหม่:
        · state.reassignNcrId (ncr ที่กำลังจะมอบหมายใหม่)
        · Handler: qcm-direct-approve · open-reassign-picker · pick-reassign-inspector

   Removed / superseded:
     · state.qcmModal + state.qcmNote (v35.0) · ไม่ใช้แล้ว · ยังเก็บ field ไว้เพื่อ backward-compat

   Preserved:
     · Everything else from v34/35 · NCR create · Checklist wizard ·
       WBS L1 scrollbar · Site/Zone bottom sheet · Person picker
-->
<!doctype html>
<html lang="th">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Task — ConstructQ Mobile v46.0 (NCR Detail — Before/After paired rows)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
/* ============================================================
   ConstructQ Mobile · DS-aligned (per ds-mobile.md)
   ============================================================ */
:root{
  /* === Brand palette (CQColors) === */
  --teal:#2BA8A2; --teal-light:#3CC4BD; --teal-dark:#1E8C86; --teal-bg:#E8F6F5; --teal-soft:#B5E5E1;
  --gold:#FFD23F; --gold-light:#FFE47A; --gold-dark:#E6B800; --gold-soft:#FFF8E7;
  --coral:#EF6C4A; --coral-light:#FF8A6A; --coral-dark:#D45233; --coral-soft:#FFE8E0;
  --sky:#5DADE2; --sky-dark:#1F6F9F; --sky-soft:#EAF4FA;
  --cream:#FFF8E7;
  --purple:#8B5CF6; --purple-soft:#EDE4FE; --purple-dark:#6D28D9;

  /* === Surfaces === */
  --surface:#FAFBFB;
  --card:#FFFFFF;

  /* === Ink scale === */
  --ink:#0E0F0F;
  --ink-2:#2A2A2A;
  --muted:#7A8590;
  --disabled:#C8D0CF;

  /* === Lines === */
  --line:#EEF1F3;
  --line-strong:#DDE3E7;

  /* === Semantic === */
  --success:#27AE60; --success-soft:#E6F5EC; --success-dark:#1E8B4A;
  --error:#E74C3C; --error-soft:#FEE7E3; --error-dark:#B8311F;
  --warn:#F59E0B; --warn-soft:#FEF3C7; --warn-dark:#B45309;
  --crit:#8B0000; --crit-soft:#FEE7E3;

  /* === Shadows === */
  --shadow-card: 0 1px 2px rgba(15,23,42,.05), 0 2px 8px rgba(15,23,42,.04);
  --shadow-elev: 0 8px 24px rgba(15,23,42,.12);
  --shadow-fab: 0 10px 24px rgba(239,108,74,.45), 0 2px 6px rgba(14,15,15,.15);

  /* === Sizing === */
  --tap:44px;
  --button-h:48px;
  --input-h:48px;
  --fab-size:56px;
  --bottom-nav-h:64px;
  --app-bar-h:56px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{
  margin:0; padding:0; background:#1a1a1a;
  color:var(--ink);
  font-family:'Sarabun','Inter',sans-serif;
  font-size:13.5px; font-weight:500; line-height:1.55;
  min-height:100vh;
}
button{font-family:inherit; cursor:pointer; border:0; background:transparent}
input, textarea, select{font-family:inherit}

/* Numerals + code use Inter */
.mono, code, .code, .id, .num{font-family:'Inter',ui-monospace,monospace}

/* v4.0 — Full-screen viewport (no demo wrapper) */
.page{width:100%; min-height:100vh; background:var(--surface)}

.phone{
  background:var(--surface); overflow:hidden;
  width:100%; min-height:100vh; position:relative;
}
@media(min-width:431px){
  /* Desktop preview: center with phone-frame look */
  body{padding:20px; background:#1a1a1a}
  .phone{
    max-width:430px; margin:0 auto;
    border-radius:36px; min-height:calc(100vh - 40px);
    box-shadow:0 24px 80px rgba(0,0,0,.4);
  }
}

/* Language toggle in screen-head */
.lang-toggle{display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:2px; gap:1px; align-items:center; height:28px}
.lang-toggle button{
  padding:0 8px; font-size:13px; font-weight:700; color:var(--muted);
  border-radius:999px; height:24px; font-family:inherit;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; cursor:pointer;
}
.lang-toggle button.on{background:var(--teal); color:#fff; box-shadow:0 1px 2px rgba(43,168,162,.30)}
.status-bar{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 28px 6px; font-size:13.5px; font-weight:700; color:var(--ink); background:var(--card);
}
.status-icons{display:flex; gap:6px; align-items:center; font-size:11.5px}
.battery{display:inline-flex; width:24px; height:11px; border:1.5px solid var(--ink); border-radius:3px; padding:1.5px; position:relative}
.battery::after{content:""; position:absolute; right:-3px; top:3px; width:2px; height:5px; background:var(--ink); border-radius:0 1px 1px 0}
.battery i{display:block; width:80%; height:100%; background:var(--ink); border-radius:1px}

.app-scroll{
  height:calc(100vh - 110px - 32px - 76px); overflow-y:auto; -webkit-overflow-scrolling:touch;
}

/* === Screen header (app bar) === */
.screen-head{
  background:var(--card); padding:8px 14px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:10;
  min-height:var(--app-bar-h);
}
.screen-head .back{
  width:var(--tap); height:var(--tap); border-radius:999px;
  font-size:22px; color:var(--ink-2); font-weight:600;
  display:inline-flex; align-items:center; justify-content:center;
}
.screen-head .back:active{background:var(--surface)}
.screen-head .title{flex:1; min-width:0}
.screen-head .t-main{font-size:16px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:7px; line-height:1.35}
.screen-head .t-sub{font-size:12px; color:var(--muted); margin-top:2px; font-weight:500}
.screen-head .head-act{display:flex; gap:2px}
.screen-head .head-act button{
  width:var(--tap); height:var(--tap); border-radius:999px; font-size:17px; position:relative;
  display:inline-flex; align-items:center; justify-content:center;
}
.screen-head .head-act button:active{background:var(--surface)}
.screen-head .head-act .bdg{
  position:absolute; top:6px; right:6px; min-width:16px; height:16px;
  background:var(--coral); color:#fff; font-size:10px; font-weight:800; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 4px;
  border:2px solid var(--card);
}

/* === Bottom tab bar (height 64) === */
.tab-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:40;
  background:rgba(255,255,255,.96); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); padding:8px 8px 22px;
  display:grid; grid-template-columns:repeat(5, 1fr); gap:2px;
  min-height:var(--bottom-nav-h);
}
.tab{
  padding:6px 4px; display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--muted); transition:color .15s; min-height:var(--tap); position:relative;
}
.tab .t-ic{font-size:19px; line-height:1}
.tab .t-tx{font-size:10.5px; font-weight:700}
.tab.on{color:var(--teal-dark)}
.tab.on .t-ic{transform:scale(1.05)}
.tab .t-bdg{
  position:absolute; top:2px; right:50%; transform:translate(14px,0);
  background:var(--coral); color:#fff; font-size:10px; font-weight:800;
  min-width:16px; height:16px; border-radius:999px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--card);
}

/* === FAB (Mobile signature · coral + glow) === */
.fab{
  position:absolute; right:16px; bottom:78px; z-index:30;
  width:var(--fab-size); height:var(--fab-size); border-radius:999px;
  background:linear-gradient(135deg,var(--coral),var(--coral-dark)); color:#fff;
  font-size:24px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-fab);
  transition:transform .12s;
}
.fab:active{transform:scale(.95)}
.fab.qcm{background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:var(--ink); box-shadow:0 10px 24px rgba(255,210,63,.50), 0 2px 6px rgba(14,15,15,.15)}
.fab.inspector{background:linear-gradient(135deg,var(--coral),var(--coral-dark)); color:#fff}
.fab.engineer{background:linear-gradient(135deg,var(--purple),var(--purple-dark)); color:#fff; box-shadow:0 10px 24px rgba(139,92,246,.45), 0 2px 6px rgba(14,15,15,.15)}
.fab.pm{background:linear-gradient(135deg,var(--sky),var(--sky-dark)); color:#fff; box-shadow:0 10px 24px rgba(93,173,226,.45), 0 2px 6px rgba(14,15,15,.15)}

/* === Role chip === */
.role-chip{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px;
  background:var(--teal-bg); color:var(--teal-dark); border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.3px;
}
.role-chip.qcm{background:var(--gold-soft); color:var(--gold-dark)}
.role-chip.inspector{background:var(--coral-soft); color:var(--coral-dark)}
.role-chip.engineer{background:var(--purple-soft); color:var(--purple-dark)}
.role-chip.pm{background:var(--sky-soft); color:var(--sky-dark)}

/* === Badges === */
.state-badge{display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.3px; line-height:1.4}
.state-badge.draft{background:#F1F5F9; color:#475569}
.state-badge.assigned{background:var(--purple-soft); color:var(--purple-dark)}
.state-badge.in_progress{background:var(--sky-soft); color:var(--sky-dark)}
.state-badge.review{background:var(--warn-soft); color:var(--warn-dark)}
.state-badge.ncr_open{background:var(--error-soft); color:var(--error-dark)}
.state-badge.ncr_verify{background:var(--purple-soft); color:var(--purple-dark)}
.state-badge.done{background:var(--success-soft); color:var(--success-dark)}
.prio-badge{display:inline-flex; align-items:center; padding:3px 9px; border-radius:6px; font-size:10.5px; font-weight:800}
.prio-badge.low{background:var(--sky-soft); color:var(--sky-dark)}
.prio-badge.medium{background:var(--warn-soft); color:var(--warn-dark)}
.prio-badge.high{background:var(--coral-soft); color:var(--coral-dark)}
.prio-badge.urgent{background:#FEE2E2; color:#991B1B}
.sev-badge{display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.3px}
.sev-badge.crit{background:var(--crit); color:#fff}
.sev-badge.high{background:var(--gold); color:#7C2D12}
.sev-badge.med{background:var(--sky-soft); color:var(--sky-dark)}
.sev-badge.low{background:#E5E7EB; color:#475569}

/* === Role bar (demo switcher) === */
.role-bar{background:var(--card); padding:10px 14px; display:flex; gap:8px; align-items:center; border-bottom:1px solid var(--line)}
.role-bar .label{font-size:11px; font-weight:700; color:var(--muted)}
.role-bar .scroller{display:flex; gap:6px; overflow-x:auto; flex:1; padding-bottom:2px}
.role-bar .scroller::-webkit-scrollbar{display:none}
.role-bar .r-chip{flex-shrink:0; padding:6px 13px; background:#F1F5F9; color:#475569; border:1px solid #E2E8F0; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap; min-height:32px}
.role-bar .r-chip.on{background:var(--teal); color:#fff; border-color:var(--teal); box-shadow:0 2px 6px rgba(43,168,162,.30)}

/* === Filter chips === */
.filter-bar{background:var(--card); padding:8px 14px; border-bottom:1px solid var(--line); display:flex; gap:6px; overflow-x:auto}
.filter-bar::-webkit-scrollbar{display:none}
.f-chip{flex-shrink:0; padding:6px 13px; background:#F1F5F9; color:#475569; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap; min-height:32px}
.f-chip.on{background:var(--ink); color:#fff}
.f-chip .count{margin-left:4px; opacity:.65}

/* === Search === */
.search-bar{padding:10px 14px; background:var(--card); border-bottom:1px solid var(--line)}
.search-bar input{
  width:100%; border:1px solid var(--line-strong); border-radius:12px;
  padding:10px 14px 10px 36px; font-family:inherit; font-size:13.5px; font-weight:500; background:var(--surface);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237A8590' stroke-width='2.5'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat:no-repeat; background-position:left 12px center;
  outline:none; min-height:var(--input-h);
}
.search-bar input:focus{border-color:var(--teal); background:var(--card)}

/* === Task card === */
.t-list{padding:12px 14px 20px}
.t-card{
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--teal);
  border-radius:14px; padding:13px 14px; margin-bottom:12px;
  box-shadow:var(--shadow-card);
  transition:transform .12s, box-shadow .12s;
}
.t-card:active{transform:scale(.99); box-shadow:0 1px 2px rgba(15,23,42,.04)}
.t-card.assigned{border-left-color:var(--purple)}
.t-card.in_progress{border-left-color:var(--sky)}
.t-card.review{border-left-color:var(--warn)}
.t-card.ncr_open{border-left-color:var(--error)}
.t-card.ncr_verify{border-left-color:var(--purple)}
.t-card.done{border-left-color:var(--success); opacity:.85}
/* v12.0 — Card layout matches web v28.0 */
.t-card .t-top{display:flex; justify-content:space-between; align-items:center; gap:6px; margin-bottom:6px}
.t-card .t-top .code-group{display:inline-flex; align-items:center; gap:6px; min-width:0; flex:1}
.t-card .t-top .code{font-family:'Inter',monospace; font-size:11px; font-weight:800; color:var(--muted)}
.t-card .t-name{
  font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.35;
  margin:0 0 6px;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.t-card .t-meta{display:flex; gap:6px; font-size:11px; color:var(--muted); flex-wrap:wrap; align-items:center; font-weight:500; margin-bottom:8px}
.t-card .t-meta .ic{color:var(--teal-dark); font-size:11px}

.t-card .t-progress{display:flex; flex-direction:column; gap:5px}
.t-card .t-progress .bar{width:100%; height:4px; background:var(--line); border-radius:999px; overflow:hidden}
.t-card .t-progress .bar i{display:block; height:100%; border-radius:999px; transition:width .3s}
.t-card .t-progress .foot{
  display:flex; justify-content:space-between; align-items:center;
  font-size:10px; font-weight:700; color:var(--muted);
}
.t-card .t-progress .foot .lbl{font-family:inherit}
.t-card .t-progress .foot .pct{font-family:'Inter',monospace}

.t-card .t-bot{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:10px; padding-top:8px; border-top:1px dashed var(--line);
  font-size:11.5px; font-weight:600;
}
.t-card .t-bot .assignee{display:inline-flex; align-items:center; gap:6px; color:var(--ink-2)}
.t-card .t-bot .avatar{
  width:24px; height:24px; border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; flex-shrink:0;
}
.t-card .t-bot .due{display:inline-flex; align-items:center; gap:4px; color:var(--ink-2); font-weight:700}
.t-card .t-bot .due.soon{color:var(--warn-dark)}
.t-card .t-bot .due.overdue{color:var(--error-dark)}
.t-card .t-bot .ncr-pill{
  background:var(--error-soft); color:var(--error-dark);
  padding:2px 8px; border-radius:999px; font-weight:800; font-size:10px;
  margin-left:6px;
}

.empty-stage{padding:50px 20px; text-align:center; color:var(--muted)}
.empty-stage .ico{font-size:42px; margin-bottom:10px; opacity:.6}

/* === Tabs nav === */
.tabs-nav{display:flex; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:var(--app-bar-h); z-index:9}
.tabs-nav button{flex:1; padding:13px 6px; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--muted); border-bottom:2px solid transparent; transition:all .15s; position:relative; min-height:var(--tap)}
.tabs-nav button.on{color:var(--teal-dark); border-bottom-color:var(--teal)}
.tabs-nav button:active{background:var(--surface)}
.tabs-nav button .bdg{margin-left:4px; background:var(--error); color:#fff; font-size:10px; font-weight:800; padding:1px 6px; border-radius:999px; min-width:18px; display:inline-block}

/* === Info card (Overview) === */
.info-card{background:var(--card); border:1px solid var(--line); border-radius:14px; margin:12px 14px; overflow:hidden; box-shadow:var(--shadow-card)}
.info-card .head{padding:14px; background:linear-gradient(135deg,var(--teal-bg),#E0F2F0); border-bottom:1px solid var(--teal-soft)}
.info-card .head .code{font-family:'Inter',monospace; font-size:13px; font-weight:800; color:var(--ink)}
.info-card .head .name{font-size:16px; font-weight:800; color:var(--ink); margin-top:6px; line-height:1.4; letter-spacing:-0.2px}
.info-card .head .pills{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.info-card .body{padding:12px 14px}
.kv-row{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed var(--line); font-size:12.5px; font-weight:500}
.kv-row:last-child{border-bottom:0}
.kv-row .k{color:var(--muted); font-weight:600}
.kv-row .v{color:var(--ink); font-weight:700; text-align:right}
.kv-row .v.mono{font-family:'Inter',monospace; font-size:12px}

/* === Action buttons (height 48 per DS) === */
.actions-row{padding:6px 14px 16px}
.act-btn{
  width:100%; padding:0 18px; height:var(--button-h); border-radius:12px;
  font-family:inherit; font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-bottom:8px;
  transition:transform .12s, box-shadow .12s;
}
.act-btn:active{transform:scale(.98)}
.act-btn.primary{background:var(--teal); color:#fff; box-shadow:0 2px 6px rgba(43,168,162,.30)}
.act-btn.success{background:var(--success); color:#fff; box-shadow:0 2px 6px rgba(39,174,96,.25)}
.act-btn.warn{background:var(--warn); color:#fff; box-shadow:0 2px 6px rgba(245,158,11,.25)}
.act-btn.danger{background:var(--error); color:#fff; box-shadow:0 2px 6px rgba(231,76,60,.30)}
.act-btn.ghost{background:var(--card); color:var(--ink); border:1.5px solid var(--line-strong); box-shadow:none}
.act-btn.ghost:active{background:var(--surface)}
/* v36.0 — disabled action button (pass-rate gate) */
.act-btn.act-btn-disabled{background:#E2E8F0; color:#94A2A0; box-shadow:none; cursor:not-allowed; pointer-events:none; position:relative; flex-direction:column; gap:2px; padding:8px 12px}
.act-btn.act-btn-disabled:active{transform:none}
.act-btn-hint{display:block; font-size:10px; font-weight:600; color:#94A2A0; letter-spacing:0}
/* v36.0 — NCR reassign button (inside NCR item · QCM only) */
.ncr-reassign-btn{margin-top:8px; width:100%; background:linear-gradient(180deg,#F59E0B,#B45309); color:#fff; border:none; padding:9px 12px; border-radius:9px; font-family:inherit; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:6px; box-shadow:0 2px 6px rgba(245,158,11,.25)}
.ncr-reassign-btn:active{transform:translateY(1px)}
/* v36.0 — Inspector Reassign picker screen */
.inp-context-card{margin:12px; padding:12px 14px; background:linear-gradient(135deg,#FEF3C7,#FDE68A); border:1px solid #FCD34D; border-radius:12px}
.inp-context-card .l{font-size:10px; font-weight:800; color:#78350F; letter-spacing:.06em; margin-bottom:2px; text-transform:uppercase}
.inp-context-card .v{font-size:13px; font-weight:800; color:var(--ink); line-height:1.4}
.inp-context-card .sub{font-size:11px; color:var(--ink-2,#475569); margin-top:4px; line-height:1.4}
.inp-list{padding:4px 12px 120px}
.inp-item{background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:8px; display:flex; align-items:center; gap:12px; cursor:pointer; transition:border-color .15s, transform .1s}
.inp-item:active{transform:scale(.99); border-color:var(--brand,#2BA8A2)}
.inp-avatar{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--brand,#2BA8A2),var(--brand-dark,#167571)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex-shrink:0}
.inp-body{flex:1; min-width:0}
.inp-name{font-size:13.5px; font-weight:800; color:var(--ink); line-height:1.3}
.inp-role{font-size:10.5px; color:var(--muted); margin-top:1px; font-weight:600}
.inp-meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; font-size:10.5px; color:var(--ink-2,#475569)}
.inp-meta span{background:var(--surface,#F8FAFC); padding:2px 8px; border-radius:99px; font-weight:700}
.inp-meta .over{background:#FEE2E2; color:#991B1B}
.inp-wl{display:flex; flex-direction:column; align-items:center; flex-shrink:0}
.inp-wl-chip{padding:4px 10px; border-radius:99px; font-size:10.5px; font-weight:800; letter-spacing:.02em}
.inp-wl-free{background:#DCFCE7; color:#065F46; border:1px solid #86EFAC}
.inp-wl-med {background:#FEF3C7; color:#B45309; border:1px solid #FCD34D}
.inp-wl-busy{background:#FEE2E2; color:#991B1B; border:1px solid #FCA5A5}
.inp-wl-n{font-size:9.5px; color:var(--muted); margin-top:3px; font-weight:700}

/* v37.0 — Reassign Modal (bottom sheet) */
.rm-overlay{position:absolute; inset:0; z-index:300; background:rgba(15,23,42,.55); display:flex; align-items:flex-end; animation:ncrConfirmIn .18s ease}
.rm-sheet{width:100%; max-height:82%; background:#fff; border-radius:18px 18px 0 0; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 -6px 24px rgba(15,23,42,.25); animation:rmSheetUp .25s cubic-bezier(.2,.9,.3,1.05)}
@keyframes rmSheetUp{from{transform:translateY(24%); opacity:.6} to{transform:translateY(0); opacity:1}}
.rm-handle{width:44px; height:4px; background:#CBD5E1; border-radius:99px; margin:8px auto 6px}
.rm-head{padding:6px 18px 4px; position:relative; border-bottom:1px solid var(--line)}
.rm-title{font-size:15px; font-weight:800; color:var(--ink); padding-right:32px; line-height:1.3}
.rm-sub{font-size:11.5px; color:var(--muted); margin-top:2px; padding-right:32px; font-weight:600}
.rm-close{position:absolute; top:6px; right:12px; width:28px; height:28px; border:none; background:var(--surface,#F8FAFC); border-radius:50%; color:var(--ink); font-size:14px; font-weight:800; cursor:pointer}
.rm-close:active{background:var(--line)}
.rm-hint{padding:10px 18px; background:linear-gradient(90deg,#FEF3C7,#FDE68A); color:#78350F; font-size:11.5px; font-weight:700; border-bottom:1px solid #FCD34D}
.rm-list{flex:1; overflow-y:auto; padding:8px 12px 20px}
/* v38.0 — row no longer whole-tap · explicit Select button */
.rm-item{background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:11px 12px; margin-bottom:7px; display:flex; align-items:center; gap:10px}
.rm-item:hover{border-color:var(--brand-soft,#A7DDD9)}
.rm-avatar{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--brand,#2BA8A2),var(--brand-dark,#167571)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0}
.rm-body{flex:1; min-width:0}
.rm-name{font-size:13px; font-weight:800; color:var(--ink); line-height:1.25}
.rm-role{font-size:10px; color:var(--muted); margin-top:1px; font-weight:600}
.rm-meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:5px; font-size:10px; color:var(--ink-2,#475569)}
.rm-meta span{background:var(--surface,#F8FAFC); padding:2px 7px; border-radius:99px; font-weight:700}
.rm-meta .over{background:#FEE2E2; color:#991B1B}
.rm-wl{display:flex; flex-direction:column; align-items:center; flex-shrink:0}
.rm-wl-chip{padding:3px 9px; border-radius:99px; font-size:10px; font-weight:800; letter-spacing:.02em}
.rm-wl-free{background:#DCFCE7; color:#065F46; border:1px solid #86EFAC}
.rm-wl-med {background:#FEF3C7; color:#B45309; border:1px solid #FCD34D}
.rm-wl-busy{background:#FEE2E2; color:#991B1B; border:1px solid #FCA5A5}
.rm-wl-n{font-size:9px; color:var(--muted); margin-top:2px; font-weight:700}
/* v38.0 — inline workload chip inside .rm-body (right of meta) */
.rm-wl-inline{display:flex; align-items:center; gap:6px; margin-top:6px}
.rm-wl-inline .rm-wl-chip{padding:2px 8px}
.rm-wl-inline .rm-wl-n{margin-top:0; font-size:10px}
/* v38.0 — explicit Select button */
.rm-pick-btn{flex-shrink:0; padding:10px 16px; border:none; border-radius:9px; background:linear-gradient(180deg,var(--brand,#2BA8A2),var(--brand-dark,#167571)); color:#fff; font-family:inherit; font-size:12.5px; font-weight:800; letter-spacing:.02em; cursor:pointer; box-shadow:0 2px 6px rgba(43,168,162,.30); min-width:64px}
.rm-pick-btn:active{transform:translateY(1px); box-shadow:0 1px 3px rgba(43,168,162,.25)}

/* v41.0 — Edit Corrective Action Modal (bottom sheet · similar to reassign) */
.ec-overlay{position:absolute; inset:0; z-index:310; background:rgba(15,23,42,.55); display:flex; align-items:flex-end; animation:ncrConfirmIn .18s ease}
.ec-sheet{width:100%; max-height:88%; background:#fff; border-radius:18px 18px 0 0; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 -6px 24px rgba(15,23,42,.25); animation:rmSheetUp .25s cubic-bezier(.2,.9,.3,1.05)}
.ec-handle{width:44px; height:4px; background:#CBD5E1; border-radius:99px; margin:8px auto 6px}
.ec-head{padding:6px 18px 4px; position:relative; border-bottom:1px solid var(--line)}
.ec-title{font-size:15px; font-weight:800; color:var(--ink); padding-right:32px; line-height:1.3}
.ec-sub{font-size:11.5px; color:var(--muted); margin-top:2px; padding-right:32px; font-weight:600}
.ec-close{position:absolute; top:6px; right:12px; width:28px; height:28px; border:none; background:var(--surface,#F8FAFC); border-radius:50%; color:var(--ink); font-size:14px; font-weight:800; cursor:pointer}
.ec-close:active{background:var(--line)}
.ec-hint{padding:10px 18px; background:linear-gradient(90deg,#E0E7FF,#C7D2FE); color:#3730A3; font-size:11.5px; font-weight:700; border-bottom:1px solid #C7D2FE; line-height:1.4}
.ec-body{flex:1; overflow-y:auto; padding:14px 16px}
.ec-lbl{display:block; font-size:12px; font-weight:800; color:var(--ink); margin-bottom:6px; letter-spacing:.02em}
.ec-input{width:100%; padding:10px 12px; border:1.5px solid var(--line-strong,#CBD5E1); border-radius:10px; font-family:inherit; font-size:13px; line-height:1.5; color:var(--ink); background:var(--card); resize:vertical; box-sizing:border-box}
.ec-input:focus{outline:none; border-color:var(--brand,#2BA8A2); box-shadow:0 0 0 3px rgba(43,168,162,.15)}
.ec-bar{display:flex; gap:8px; padding:12px 16px 20px; border-top:1px solid var(--line); background:var(--card)}
.ec-btn{flex:1; height:46px; border-radius:11px; font-family:inherit; font-size:14px; font-weight:800; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px}
.ec-btn-ghost{background:var(--card); color:var(--ink); border:1.5px solid var(--line-strong,#CBD5E1)}
.ec-btn-primary{background:linear-gradient(180deg,var(--brand,#2BA8A2),var(--brand-dark,#167571)); color:#fff; box-shadow:0 2px 6px rgba(43,168,162,.30)}
.ec-btn:active{transform:translateY(1px)}

/* v42.0 — Combined Edit + Reassign NCR Modal (bottom sheet · 3 sections) */
.en-overlay{position:absolute; inset:0; z-index:320; background:rgba(15,23,42,.58); display:flex; align-items:flex-end; animation:ncrConfirmIn .18s ease}
.en-sheet{width:100%; max-height:92%; background:#fff; border-radius:18px 18px 0 0; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 -6px 24px rgba(15,23,42,.28); animation:rmSheetUp .25s cubic-bezier(.2,.9,.3,1.05)}
.en-handle{width:44px; height:4px; background:#CBD5E1; border-radius:99px; margin:8px auto 6px}
.en-head{padding:6px 18px 8px; position:relative; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#F0FDFA,#fff)}
.en-title{font-size:15.5px; font-weight:800; color:var(--ink); padding-right:34px; line-height:1.3}
.en-sub{font-size:11.5px; color:var(--muted); margin-top:2px; padding-right:34px; font-weight:600}
.en-close{position:absolute; top:6px; right:12px; width:28px; height:28px; border:none; background:var(--surface,#F8FAFC); border-radius:50%; color:var(--ink); font-size:14px; font-weight:800; cursor:pointer}
.en-close:active{background:var(--line)}

.en-body{flex:1; overflow-y:auto; padding:12px 14px 16px}
.en-section{background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:12px; margin-bottom:12px}
.en-section-h{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.en-section-num{width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,var(--brand,#2BA8A2),var(--brand-dark,#167571)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; flex-shrink:0}
.en-section-t{font-size:13.5px; font-weight:800; color:var(--ink); flex:1}
.en-section-hint{font-size:10.5px; color:var(--muted); font-weight:700; background:var(--surface,#F8FAFC); padding:2px 8px; border-radius:99px}
.en-section-badge{font-size:10.5px; color:var(--brand-dark,#167571); font-weight:800; background:#DCFCE7; padding:2px 8px; border-radius:99px; border:1px solid #86EFAC}

.en-lbl{display:block; font-size:11.5px; font-weight:800; color:var(--ink-2,#475569); margin-bottom:4px; letter-spacing:.02em}
.en-input{width:100%; padding:9px 11px; border:1.5px solid var(--line-strong,#CBD5E1); border-radius:9px; font-family:inherit; font-size:12.5px; line-height:1.5; color:var(--ink); background:var(--card); box-sizing:border-box; resize:vertical}
.en-input:focus{outline:none; border-color:var(--brand,#2BA8A2); box-shadow:0 0 0 3px rgba(43,168,162,.15)}
.en-date{font-size:13px; padding:10px 11px}

/* v43.0 — Owner Dropdown */
.en-dd-trigger{width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--surface,#F8FAFC); border:1.5px solid var(--line-strong,#CBD5E1); border-radius:10px; cursor:pointer; font-family:inherit; text-align:left; transition:border-color .15s, background .15s; box-sizing:border-box}
.en-dd-trigger:active{transform:scale(.995)}
.en-dd-trigger:hover{border-color:var(--brand-soft,#A7DDD9)}
.en-dd-trigger.en-dd-open{border-color:var(--brand,#2BA8A2); background:var(--card); border-radius:10px 10px 0 0; border-bottom-color:var(--line)}
.en-dd-trigger.en-dd-selected{border-color:var(--brand-soft,#A7DDD9); background:linear-gradient(90deg,#ECFDF5,#F0FDFA)}
.en-dd-avatar{width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--brand,#2BA8A2),var(--brand-dark,#167571)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12.5px; flex-shrink:0}
.en-dd-avatar-placeholder{background:#CBD5E1; color:#64748B; font-size:18px}
.en-dd-info{flex:1; min-width:0}
.en-dd-name{font-size:13px; font-weight:800; color:var(--ink); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.en-dd-role{font-size:10.5px; color:var(--muted); margin-top:2px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.en-dd-wl-mini{padding:3px 8px; border-radius:99px; font-size:10px; font-weight:800; letter-spacing:.02em; flex-shrink:0}
.en-dd-caret{color:var(--muted); font-size:11px; font-weight:800; flex-shrink:0; width:14px; text-align:center}
.en-dd-panel{background:var(--card); border:1.5px solid var(--brand,#2BA8A2); border-top:none; border-radius:0 0 10px 10px; max-height:340px; overflow-y:auto; padding:6px; animation:enDdSlide .18s ease}
@keyframes enDdSlide { from { opacity:0; transform:translateY(-4px) } to { opacity:1; transform:translateY(0) } }
.en-dd-panel-hint{padding:6px 8px 8px; font-size:10.5px; font-weight:700; color:var(--brand-dark,#167571); background:var(--brand-bg,#E8F6F5); border-radius:6px; margin-bottom:6px; text-align:center}

.en-sub-list{display:flex; flex-direction:column; gap:6px}
.en-sub-item{display:flex; align-items:center; gap:10px; padding:10px; border:1.5px solid var(--line); border-radius:10px; background:var(--surface,#F8FAFC); cursor:pointer; transition:border-color .12s, background .12s}
.en-sub-item:active{transform:scale(.99)}
.en-sub-selected{border-color:var(--brand,#2BA8A2); background:linear-gradient(90deg,#ECFDF5,#F0FDFA); box-shadow:0 0 0 3px rgba(43,168,162,.15)}
.en-sub-avatar{width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#A78BFA,#7C3AED); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12.5px; flex-shrink:0}
.en-sub-selected .en-sub-avatar{background:linear-gradient(135deg,var(--brand,#2BA8A2),var(--brand-dark,#167571))}
.en-sub-body{flex:1; min-width:0}
.en-sub-name{font-size:12.5px; font-weight:800; color:var(--ink); line-height:1.25}
.en-sub-role{font-size:10px; color:var(--muted); margin-top:1px; font-weight:600}
.en-sub-meta{display:flex; gap:5px; flex-wrap:wrap; margin-top:4px; font-size:10px; color:var(--ink-2,#475569)}
.en-sub-meta span{background:var(--card); padding:2px 6px; border-radius:99px; font-weight:700; border:1px solid var(--line)}
.en-sub-meta .en-over{background:#FEE2E2; color:#991B1B; border-color:#FCA5A5}
.en-sub-right{display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0}
.en-wl-chip{padding:3px 8px; border-radius:99px; font-size:9.5px; font-weight:800; letter-spacing:.02em}
.en-wl-free{background:#DCFCE7; color:#065F46; border:1px solid #86EFAC}
.en-wl-med {background:#FEF3C7; color:#B45309; border:1px solid #FCD34D}
.en-wl-busy{background:#FEE2E2; color:#991B1B; border:1px solid #FCA5A5}
.en-selected-badge{font-size:9.5px; color:var(--brand-dark,#167571); font-weight:800; background:#fff; padding:2px 6px; border-radius:99px; border:1px solid var(--brand-soft,#A7DDD9)}

.en-bar{display:flex; gap:8px; padding:12px 16px 18px; border-top:1px solid var(--line); background:var(--card)}
.en-btn{flex:1; height:46px; border-radius:11px; font-family:inherit; font-size:14px; font-weight:800; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px}
.en-btn-ghost{background:var(--card); color:var(--ink); border:1.5px solid var(--line-strong,#CBD5E1)}
.en-btn-primary{background:linear-gradient(180deg,var(--brand,#2BA8A2),var(--brand-dark,#167571)); color:#fff; box-shadow:0 2px 6px rgba(43,168,162,.30)}
.en-btn:active{transform:translateY(1px)}

/* v37.0 — Pinned task card (just-reassigned · top of list) */
.t-card-pinned{border-color:#10B981 !important; box-shadow:0 0 0 3px rgba(16,185,129,.18), 0 4px 14px rgba(16,185,129,.15) !important; position:relative; animation:pinnedPulse 1.6s ease-in-out infinite}
.t-card-pinned::before{content:'✓ พึ่งมอบหมาย'; position:absolute; top:-8px; left:12px; background:#10B981; color:#fff; font-size:10px; font-weight:800; padding:2px 10px; border-radius:99px; box-shadow:0 2px 6px rgba(16,185,129,.35); z-index:2}
@keyframes pinnedPulse{0%,100%{box-shadow:0 0 0 3px rgba(16,185,129,.18), 0 4px 14px rgba(16,185,129,.15)} 50%{box-shadow:0 0 0 5px rgba(16,185,129,.28), 0 6px 20px rgba(16,185,129,.25)}}

/* === Stat mini cards === */
.stats-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 14px}
.stat-mini{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; box-shadow:var(--shadow-card)}
.stat-mini .v{font-size:24px; font-weight:800; color:var(--ink); font-family:'Inter',sans-serif; letter-spacing:-0.5px}
.stat-mini.pass .v{color:var(--success-dark)}
.stat-mini.ncr .v{color:var(--error-dark)}
.stat-mini .l{font-size:10.5px; color:var(--muted); font-weight:700; text-transform:uppercase; margin-top:3px; letter-spacing:.4px}

/* === Lifecycle timeline === */
.timeline{padding:14px 14px 80px; position:relative}
.timeline::before{content:""; position:absolute; left:30px; top:14px; bottom:50px; width:2px; background:var(--line)}
.tl-step{display:grid; grid-template-columns:34px 1fr; gap:12px; margin-bottom:14px; position:relative}
.tl-step .dot{width:32px; height:32px; border-radius:50%; background:var(--card); border:2.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:var(--muted); z-index:1; font-family:'Inter',sans-serif}
.tl-step.done .dot{background:var(--success); border-color:var(--success); color:#fff}
.tl-step.active .dot{background:var(--warn); border-color:var(--warn); color:#fff; box-shadow:0 0 0 4px var(--warn-soft)}
.tl-step .body{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px; box-shadow:var(--shadow-card)}
.tl-step.done .body{background:#F0FDF4; border-color:#BBF7D0}
.tl-step.active .body{background:#FFFBEB; border-color:#FDE68A}
.tl-step .name{font-size:13px; font-weight:800; color:var(--ink)}
.tl-step .meta{font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.5; font-weight:500}
.tl-step .meta b{color:var(--ink-2); font-weight:700}
.tl-step .pill{display:inline-block; margin-top:5px; padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:800; background:#F1F5F9; color:#475569; letter-spacing:.4px}
.tl-step.done .pill{background:var(--success-soft); color:var(--success-dark)}
.tl-step.active .pill{background:var(--warn-soft); color:var(--warn-dark)}

/* === Checklist sections === */
.gps-banner{background:linear-gradient(135deg,var(--warn-soft),#FDE68A); color:var(--warn-dark); margin:12px 14px 0; padding:10px 14px; border-radius:10px; display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700}

.prog-bar-wrap{padding:10px 14px; background:var(--card); border-bottom:1px solid var(--line)}
.prog-bar-wrap .lbl{display:flex; justify-content:space-between; font-size:11.5px; font-weight:700; color:var(--ink-2); margin-bottom:6px}
.prog-bar-wrap .lbl b{font-family:'Inter',sans-serif}
.prog-bar-wrap .bar{height:6px; background:var(--line); border-radius:999px; overflow:hidden}
.prog-bar-wrap .bar i{display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--teal-light)); border-radius:999px; transition:width .3s}

.section-head{display:flex; align-items:center; gap:8px; padding:12px 14px 4px}
.section-head h3{margin:0; font-size:14px; font-weight:700; color:var(--ink)}

.ckl-sec{margin:10px 14px}
.ckl-sec-head{display:flex; align-items:center; gap:8px; padding:10px 12px; background:linear-gradient(135deg,var(--surface),#F1F5F9); border:1px solid var(--line); border-radius:12px 12px 0 0}
.ckl-sec-num{width:26px; height:26px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:11.5px; font-family:'Inter',sans-serif}
.ckl-sec-title{flex:1; font-size:13px; font-weight:800; color:var(--ink)}
.ckl-sec-count{font-size:11px; background:var(--card); padding:3px 9px; border-radius:999px; color:var(--muted); font-weight:700; font-family:'Inter',sans-serif}
.ckl-items{background:var(--card); border:1px solid var(--line); border-top:0; border-radius:0 0 12px 12px}
.ckl-item{padding:11px 12px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:50px 1fr auto; gap:8px; align-items:center; min-height:var(--tap)}
.ckl-item:last-child{border-bottom:0}
.ckl-item:active{background:var(--surface)}
.ckl-item .code{font-family:'Inter',monospace; font-size:10.5px; font-weight:800; background:#F1F5F9; padding:3px 7px; border-radius:5px; text-align:center; color:var(--ink)}
.ckl-item .text{font-size:12.5px; line-height:1.45; color:var(--ink); font-weight:500}
.ckl-item .status{font-size:10.5px; padding:4px 10px; border-radius:999px; font-weight:800; white-space:nowrap; letter-spacing:.3px}
.ckl-item .status.pass{background:var(--success-soft); color:var(--success-dark)}
.ckl-item .status.fail{background:var(--error-soft); color:var(--error-dark)}
.ckl-item .status.pending{background:#F1F5F9; color:var(--muted)}

/* === NCR list (Tab + cards) === */
.ncr-list{padding:12px 14px}
.ncr-item{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--error); border-radius:12px; padding:12px 14px; margin-bottom:10px; box-shadow:var(--shadow-card)}
.ncr-item.high{border-left-color:var(--warn)}
.ncr-item.med{border-left-color:var(--sky)}
.ncr-item .ncr-top{display:flex; align-items:center; gap:6px; margin-bottom:6px; flex-wrap:wrap}
.ncr-item .ncr-top .id{font-family:'Inter',monospace; font-size:11.5px; font-weight:800; color:var(--error-dark)}
.ncr-item .ncr-title{font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.45; margin-bottom:6px}
.ncr-item .ncr-meta{font-size:11px; color:var(--muted); display:flex; flex-wrap:wrap; gap:8px; font-weight:500}
.ncr-item .view-btn{width:100%; margin-top:8px; padding:0; height:36px; background:var(--teal); color:#fff; border-radius:8px; font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center}
.ncr-item .view-btn:active{background:var(--teal-dark)}

/* === NCR Detail modal sections === */
.ncrm-h{padding:14px 14px; background:linear-gradient(135deg,var(--error-soft),#FECACA); border-bottom:1px solid #FCA5A5; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ncrm-h .icon{font-size:22px}
.ncrm-h .id{font-family:'Inter',monospace; font-size:15px; font-weight:800; color:var(--crit)}
.ncrm-h .sw{padding:3px 10px; border-radius:999px; font-size:10.5px; font-weight:800; background:var(--crit); color:#fff; letter-spacing:.4px}

.sec{background:var(--card); border:1px solid var(--line); border-radius:12px; margin:10px 14px; padding:14px; box-shadow:var(--shadow-card)}
.sec h4{margin:0 0 10px; font-size:11.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; display:flex; align-items:center; gap:6px}
.sec .kv{display:grid; grid-template-columns:100px 1fr; gap:5px 10px; font-size:12.5px; line-height:1.55; font-weight:500}
.sec .kv .k{color:var(--muted); font-weight:600}
.sec .kv .v{color:var(--ink); font-weight:700}
.sec .kv .v.mono{font-family:'Inter',monospace; font-size:12px}
.defect-title{font-size:14.5px; font-weight:800; color:var(--ink); margin-bottom:6px; line-height:1.4}
.defect-desc{font-size:12.5px; color:var(--ink-2); line-height:1.65; padding:10px 12px; background:var(--surface); border-left:3px solid var(--error); border-radius:0 8px 8px 0; margin-bottom:8px; font-weight:500}
.rootcause-box{font-size:12.5px; color:var(--ink-2); line-height:1.65; padding:10px 12px; background:#FFF7ED; border-left:3px solid var(--warn); border-radius:0 8px 8px 0; font-weight:500}
.corr-pre{font-family:inherit; font-size:12.5px; color:var(--ink-2); line-height:1.7; margin:0 0 10px; white-space:pre-wrap; padding:10px 12px; background:var(--surface); border-left:3px solid var(--teal); border-radius:0 8px 8px 0; font-weight:500}

.ph-split{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px}
.ph-group{padding:9px 11px; border-radius:10px}
.ph-group.before{background:linear-gradient(135deg,var(--error-soft),#FECACA); border:1px solid #FCA5A5}
.ph-group.after{background:linear-gradient(135deg,var(--success-soft),#A7F3D0); border:1px solid #6EE7B7}
.ph-group .lbl{font-size:11px; font-weight:800; text-transform:uppercase; display:flex; justify-content:space-between; margin-bottom:6px; letter-spacing:.4px}
.ph-group.before .lbl{color:var(--error-dark)}
.ph-group.after .lbl{color:var(--success-dark)}
.ph-group .photos{display:flex; gap:5px; flex-wrap:wrap}
.ph-group .thumb{width:50px; height:50px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:18px}
.ph-group.before .thumb{background:linear-gradient(135deg,#FECACA,#FCA5A5); color:var(--crit)}
.ph-group.after .thumb{background:linear-gradient(135deg,#A7F3D0,#6EE7B7); color:#065F46}
.ph-empty{font-size:11.5px; color:var(--muted); font-style:italic; padding:6px; text-align:center}

/* === v46.0 — Paired-row Before/After for mobile · photo[i] before aligns with photo[i] after === */
.ph-pair-wrap{margin-top:8px}
.ph-pair-head{display:grid; grid-template-columns:1fr auto 1fr; gap:6px; margin-bottom:8px; align-items:center}
.ph-pair-head .ph-h{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 8px; border-radius:8px; font-size:10.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.3px;
}
.ph-pair-head .ph-h.before{background:linear-gradient(135deg,var(--error-soft),#FECACA); border:1px solid #FCA5A5; color:var(--error-dark)}
.ph-pair-head .ph-h.after{background:linear-gradient(135deg,var(--success-soft),#A7F3D0); border:1px solid #6EE7B7; color:var(--success-dark)}
.ph-pair-head .ph-h .cnt{font-size:10px; background:rgba(0,0,0,.06); padding:1px 6px; border-radius:99px; font-weight:800}
.ph-pair-head .ph-gap{width:22px}

.ph-pair-rows{display:flex; flex-direction:column; gap:8px}
.ph-pair-row{display:grid; grid-template-columns:1fr auto 1fr; gap:6px; align-items:center}
.ph-pair-cell{
  padding:8px; border-radius:9px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:78px;
}
.ph-pair-cell.before{background:linear-gradient(135deg,var(--error-soft),#FECACA); border:1px solid #FCA5A5}
.ph-pair-cell.after{background:linear-gradient(135deg,var(--success-soft),#A7F3D0); border:1px solid #6EE7B7}
.ph-pair-cell .ph{
  width:56px; height:56px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; position:relative;
}
.ph-pair-cell.before .ph{background:linear-gradient(135deg,#FECACA,#FCA5A5); color:var(--crit)}
.ph-pair-cell.after .ph{background:linear-gradient(135deg,#A7F3D0,#6EE7B7); color:#065F46}
.ph-pair-cell .ph::after{
  content:attr(data-tag); position:absolute; bottom:2px; right:3px;
  font-size:8px; font-weight:700; color:#fff;
  background:rgba(0,0,0,.65); padding:0 4px; border-radius:3px;
}
.ph-pair-cell .cap{font-size:9.5px; font-weight:700; letter-spacing:.02em}
.ph-pair-cell.before .cap{color:var(--error-dark)}
.ph-pair-cell.after .cap{color:var(--success-dark)}

/* Empty placeholder */
.ph-pair-cell.empty{
  background:repeating-linear-gradient(45deg,#F8FAFC,#F8FAFC 5px,#F1F5F9 5px,#F1F5F9 10px);
  border:1.5px dashed #CBD5E1;
}
.ph-pair-cell.empty .ph-slot{
  width:56px; height:56px; border-radius:8px; border:2px dashed #CBD5E1;
  background:rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center;
  font-size:18px; color:#94A3B8;
}
.ph-pair-cell.empty .cap-empty{font-size:9.5px; font-weight:600; color:#94A3B8; font-style:italic; text-align:center; line-height:1.2}

/* Compare arrow */
.ph-pair-row .compare-arrow, .ph-pair-head .compare-arrow{
  color:#94A3B8; font-size:14px; font-weight:800;
  display:grid; place-items:center; width:22px;
}
.ph-pair-empty-all{
  padding:16px 10px; text-align:center; font-size:11.5px; color:#94A3B8;
  font-style:italic; background:#F8FAFC; border:1px dashed var(--line); border-radius:9px;
}

/* === Workflow steps === */
.wf-step{display:grid; grid-template-columns:30px 1fr auto; gap:10px; align-items:center; padding:10px 12px; background:var(--surface); border-radius:10px; margin-bottom:6px}
.wf-step.done{background:#F0FDF4; border:1px solid #BBF7D0}
.wf-step.active{background:#FFFBEB; border:1px solid #FDE68A}
.wf-step .num{width:26px; height:26px; border-radius:50%; background:var(--card); border:2px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:800; color:var(--muted); font-family:'Inter',sans-serif}
.wf-step.done .num{background:var(--success); border-color:var(--success); color:#fff}
.wf-step.active .num{background:var(--warn); border-color:var(--warn); color:#fff}
.wf-step .name{font-size:12.5px; font-weight:800; color:var(--ink)}
.wf-step .meta{font-size:11px; color:var(--muted); margin-top:2px; font-weight:500}
.wf-step .stat{font-size:10px; font-weight:800; padding:3px 8px; border-radius:999px; letter-spacing:.3px}
.wf-step.done .stat{background:var(--success-soft); color:var(--success-dark)}
.wf-step.active .stat{background:var(--warn-soft); color:var(--warn-dark)}
.wf-step:not(.done):not(.active) .stat{background:#F1F5F9; color:var(--muted)}

/* === Bottom action bar (NCR Detail) === */
.action-bar{position:absolute; left:0; right:0; bottom:0; z-index:50; background:var(--card); border-top:1px solid var(--line); padding:10px 14px 22px; box-shadow:0 -4px 12px rgba(15,23,42,.08)}
.action-bar .sla{font-size:11px; color:var(--muted); text-align:center; padding:2px 0 4px; font-weight:600}
.action-bar .a-row{display:flex; gap:6px; margin-top:4px}
.a-btn{flex:1; padding:0 8px; height:var(--button-h); border-radius:10px; font-size:12.5px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:5px; min-height:var(--button-h)}
.a-btn:active{transform:scale(.98)}
.a-btn.ghost{background:var(--card); color:var(--ink); border:1.5px solid var(--line-strong)}
.a-btn.pass{background:var(--success); color:#fff; box-shadow:0 2px 6px rgba(39,174,96,.30)}
.a-btn.fail{background:var(--error); color:#fff; box-shadow:0 2px 6px rgba(231,76,60,.30)}
.a-btn.primary{background:var(--teal); color:#fff; box-shadow:0 2px 6px rgba(43,168,162,.30)}

/* === NCR Submit === */
.info-strip{background:linear-gradient(135deg,var(--error-soft),#FECACA); border:1px solid #FCA5A5; padding:12px 14px; border-radius:12px; margin:12px 14px; display:flex; gap:10px; align-items:center}
.info-strip .ico{font-size:20px}
.info-strip .id{font-family:'Inter',monospace; font-size:12px; font-weight:800; color:var(--crit)}
.info-strip .title{font-size:12.5px; font-weight:700; margin-top:3px; line-height:1.5; color:var(--ink)}

.form-sec{background:var(--card); border:1px solid var(--line); border-radius:12px; margin:10px 14px; padding:14px; box-shadow:var(--shadow-card)}
.form-sec h4{margin:0 0 12px; font-size:11.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.5px}
.form-grp{margin-bottom:14px}
.form-grp:last-child{margin-bottom:0}
.form-grp label{display:block; font-size:11.5px; font-weight:700; color:var(--ink-2); margin-bottom:6px}
.form-grp label .req{color:var(--error)}
.form-input{
  width:100%; border:1px solid var(--line-strong); border-radius:12px; padding:0 14px;
  font-family:inherit; font-size:13.5px; font-weight:500; background:var(--card); color:var(--ink);
  min-height:var(--input-h); transition:border-color .12s;
}
.form-input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(43,168,162,.12)}
textarea.form-input{padding:12px 14px; min-height:80px; resize:vertical}
select.form-input{padding-right:36px; appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231E8C86' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat:no-repeat; background-position:right 14px center}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}

.ph-list{display:flex; gap:8px; flex-wrap:wrap}
.ph-thumb{width:64px; height:64px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px; position:relative}
.ph-thumb.before{background:linear-gradient(135deg,#FECACA,#FCA5A5); color:var(--crit)}
.ph-thumb.after{background:linear-gradient(135deg,#A7F3D0,#6EE7B7); color:#065F46}
.ph-add{width:64px; height:64px; border-radius:10px; border:1.5px dashed var(--teal); background:var(--teal-bg); color:var(--teal-dark); font-size:11.5px; font-weight:700; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px}
.ph-add .ico{font-size:20px}

.submit-bar{position:absolute; left:0; right:0; bottom:0; z-index:50; background:var(--card); border-top:1px solid var(--line); padding:12px 14px 22px; display:flex; gap:8px; box-shadow:0 -4px 12px rgba(15,23,42,.08)}
.submit-bar button{flex:1; padding:0 16px; height:var(--button-h); border-radius:12px; font-family:inherit; font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:6px}
.btn-save{background:var(--card); color:var(--ink); border:1.5px solid var(--line-strong)}
.btn-create{background:var(--teal); color:#fff; box-shadow:0 4px 12px rgba(43,168,162,.35)}
.btn-create.purple{background:var(--purple); box-shadow:0 4px 12px rgba(139,92,246,.40)}

/* === Pass/Fail/Skip buttons === */
.pf-row{display:flex; gap:8px; margin-bottom:10px}
.pf-btn{flex:1; padding:0 8px; height:var(--button-h); border:2px solid var(--line); background:var(--card); border-radius:10px; font-size:12.5px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:5px; min-height:var(--button-h)}
.pf-btn.pass{color:var(--success-dark)}
.pf-btn.fail{color:var(--error-dark)}
.pf-btn.skip{color:var(--muted)}
.pf-btn.on.pass{background:var(--success); border-color:var(--success); color:#fff; box-shadow:0 2px 6px rgba(39,174,96,.25)}
.pf-btn.on.fail{background:var(--error); border-color:var(--error); color:#fff; box-shadow:0 2px 6px rgba(231,76,60,.25)}
.pf-btn.on.skip{background:#94A3B8; border-color:#94A3B8; color:#fff}

.ck-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin:10px 14px; box-shadow:var(--shadow-card)}
.ck-card .ck-top{display:flex; align-items:center; gap:6px; margin-bottom:8px; flex-wrap:wrap}
.ck-card .ck-top .code{font-family:'Inter',monospace; font-size:11px; font-weight:800; background:#F1F5F9; padding:3px 8px; border-radius:6px; color:var(--ink)}
.ck-card .ck-top .sev{padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.3px}
.ck-card .ck-top .sev.crit{background:var(--crit); color:#fff}
.ck-card .ck-top .sev.high{background:var(--gold); color:#7C2D12}
.ck-card .ck-top .sev.med{background:var(--sky-soft); color:var(--sky-dark)}
.ck-card .ck-top .req{margin-left:auto; font-size:10.5px; color:var(--error); font-weight:800}
.ck-card .ck-q{font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.5; margin-bottom:6px}
.ck-card .ck-help{font-size:11.5px; color:var(--muted); margin-bottom:10px; line-height:1.55; font-weight:500}
.req-label{font-size:11.5px; font-weight:700; color:var(--ink-2); margin-bottom:5px; display:flex; align-items:center; gap:6px}
.req-label .req-star{color:var(--error); font-size:13px}
.photo-row{display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap}
.photo-thumb{width:60px; height:60px; border-radius:10px; background:linear-gradient(135deg,#DBEAFE,#BFDBFE); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--sky-dark)}
.photo-btn{width:60px; height:60px; border:1.5px dashed var(--teal); background:var(--teal-bg); border-radius:10px; color:var(--teal-dark); font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:2px}
.photo-btn .ico{font-size:16px}
.ck-comment{width:100%; border:1px solid var(--line-strong); border-radius:10px; padding:10px 12px; font-family:inherit; font-size:12.5px; font-weight:500; resize:vertical; min-height:56px}
.ck-comment:focus{outline:none; border-color:var(--teal)}

/* === Linkable === */
.linkable{color:var(--teal-dark); text-decoration:underline}

/* === Priority pick (Create form) === */
.prio-pick{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.prio-pick button{padding:0 6px; height:var(--button-h); border:1.5px solid var(--line); background:var(--card); border-radius:10px; font-size:11.5px; font-weight:700}
.prio-pick button.low.on{background:var(--sky-soft); border-color:var(--sky); color:var(--sky-dark)}
.prio-pick button.medium.on{background:var(--warn-soft); border-color:var(--warn); color:var(--warn-dark)}
.prio-pick button.high.on{background:var(--coral-soft); border-color:var(--coral); color:var(--coral-dark)}
.prio-pick button.urgent.on{background:#FEE2E2; border-color:var(--error); color:var(--error-dark)}

/* === Toast === */
.toast{
  position:fixed; bottom:140px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:12px 22px; border-radius:999px;
  font-size:12.5px; font-weight:700; z-index:100; display:none;
  max-width:380px; box-shadow:var(--shadow-elev);
}
.toast.show{display:inline-flex; animation:slideUp .25s ease}
@keyframes slideUp{from{transform:translate(-50%,16px); opacity:0} to{transform:translate(-50%,0); opacity:1}}

/* === v4.0 — Detailed Checklist tab (expand/collapse) === */
.ckl-stats{display:flex; gap:6px; padding:10px 14px 4px; flex-wrap:wrap}
.cs-chip{padding:5px 11px; border-radius:999px; font-size:11px; font-weight:700; display:inline-flex; align-items:center; gap:5px}
.cs-chip .v{font-size:13px; font-weight:800; font-family:'Inter',sans-serif}
.cs-chip.total{background:#F1F5F9; color:#334155}
.cs-chip.pass{background:var(--success-soft); color:var(--success-dark)}
.cs-chip.fail{background:var(--error-soft); color:var(--error-dark)}
.cs-chip.pending{background:var(--warn-soft); color:var(--warn-dark)}

.ckl-sec-v4{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--card); margin:10px 14px; box-shadow:var(--shadow-card)}
.ckl-sec-head-v4{display:flex; align-items:center; gap:10px; padding:12px 14px; background:linear-gradient(135deg,var(--surface),#F1F5F9); border-bottom:1px solid var(--line)}
.ckl-sec-head-v4 .ckl-sec-num{width:28px; height:28px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; font-family:'Inter',sans-serif}
.ckl-sec-head-v4 .ckl-sec-meta{flex:1; min-width:0}
.ckl-sec-head-v4 .ckl-sec-title{font-size:13px; font-weight:800; color:var(--ink); line-height:1.4}
.ckl-sec-head-v4 .ckl-sec-desc{font-size:11px; color:var(--muted); margin-top:2px; line-height:1.4; font-weight:500}
.ckl-sec-head-v4 .ckl-sec-count{font-size:11px; padding:3px 9px; border-radius:999px; background:var(--card); border:1px solid var(--line); color:var(--ink-2); font-weight:700; font-family:'Inter',sans-serif; white-space:nowrap}

.ckl-item-v4{border-top:1px solid var(--line)}
.ckl-item-v4:first-of-type{border-top:0}
.ckl-item-row-v4{
  display:grid; grid-template-columns:54px 1fr auto auto;
  gap:8px; align-items:center; padding:12px 14px; min-height:var(--tap);
  cursor:pointer; transition:background .12s;
}
.ckl-item-row-v4:active{background:var(--surface)}
.ckl-item-v4.expanded > .ckl-item-row-v4{background:var(--surface)}
.ckl-item-row-v4 .code{font-family:'Inter',monospace; font-size:10.5px; font-weight:800; color:var(--ink); background:#F1F5F9; padding:3px 6px; border-radius:5px; text-align:center}
.ckl-item-row-v4 .text{min-width:0}
.ckl-item-row-v4 .ckl-item-label{font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.4}
.ckl-item-row-v4 .ckl-item-meta{font-size:10.5px; color:var(--muted); margin-top:3px; display:flex; flex-wrap:wrap; gap:5px; align-items:center; font-weight:500}
.sev-mini{font-weight:800; padding:1px 7px; border-radius:999px; font-size:9.5px; letter-spacing:.3px}
.sev-mini.critical{background:var(--error-soft); color:var(--error-dark)}
.sev-mini.high{background:#FFF8E7; color:#B07900}
.sev-mini.medium{background:var(--teal-bg); color:var(--teal-dark)}
.status-pill{font-size:10.5px; padding:4px 10px; border-radius:999px; font-weight:800; display:inline-flex; align-items:center; gap:3px; white-space:nowrap; letter-spacing:.3px}
.status-pill.pass{background:var(--success-soft); color:var(--success-dark)}
.status-pill.fail{background:var(--error-soft); color:var(--error-dark)}
.status-pill.pending{background:#F1F5F9; color:var(--muted)}
.ckl-toggle{
  width:30px; height:30px; border-radius:999px; font-size:12px; color:var(--muted); font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .2s, background .12s;
}
.ckl-toggle:active{background:var(--line)}
.ckl-item-v4.expanded .ckl-toggle{transform:rotate(180deg); background:var(--line); color:var(--ink-2)}

.ckl-item-body{
  padding:8px 14px 16px 76px; background:#FAFBFC; border-top:1px solid var(--line);
}
.ckl-row{display:grid; grid-template-columns:100px 1fr; gap:6px 10px; padding:6px 0; font-size:12px; line-height:1.55; font-weight:500}
.ckl-row .k{color:var(--muted); font-weight:600}
.ckl-row .v{color:var(--ink); font-weight:600}
.ckl-row .v.in-spec{color:var(--success-dark); font-weight:700}
.ckl-row .v .code{font-family:'Inter',monospace; background:var(--line); padding:2px 7px; border-radius:5px; font-size:11px; color:var(--ink)}
.ckl-photos{display:flex; gap:6px; flex-wrap:wrap; padding:4px 0}
.ckl-photos .thumb{width:50px; height:50px; border-radius:8px; background:linear-gradient(135deg,#DBEAFE,#BFDBFE); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--sky-dark)}

.ckl-ncr-box{
  background:var(--error-soft); border-left:4px solid var(--error);
  border-radius:0 10px 10px 0; padding:10px 12px; margin:10px 0 6px;
  cursor:pointer; transition:background .12s;
}
.ckl-ncr-box:active{background:#FECACA}
.ncr-bx-head{display:flex; align-items:center; gap:6px; margin-bottom:6px; flex-wrap:wrap}
.ncr-bx-head .ico{font-size:14px}
.ncr-bx-head .id{font-family:'Inter',monospace; font-size:11.5px; font-weight:800; color:var(--error-dark)}
.ncr-bx-title{font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:8px; line-height:1.45}
.ncr-bx-grid{display:grid; grid-template-columns:90px 1fr; gap:5px 9px; font-size:11.5px; line-height:1.55; color:var(--ink-2); font-weight:500}
.ncr-bx-grid .k{color:var(--muted); font-weight:600}
.ncr-bx-link{
  margin-top:8px; padding:0 12px; height:32px; background:var(--error); color:#fff;
  border-radius:7px; font-size:11.5px; font-weight:800; font-family:inherit;
  display:inline-flex; align-items:center; gap:4px;
}

/* === v6.0 — Create NCR form === */
.ncr-create-banner{
  background:linear-gradient(135deg,var(--error-soft),#FECACA); border:1px solid #FCA5A5;
  border-radius:12px; padding:12px 14px; margin:12px 14px; display:flex; gap:10px; align-items:center;
}
.ncr-create-banner .ico{font-size:22px}
.ncr-create-banner .label{font-size:11px; font-weight:800; color:var(--error-dark); text-transform:uppercase; letter-spacing:.4px}
.ncr-create-banner .item{font-size:13px; font-weight:800; color:var(--ink); margin-top:2px; line-height:1.4}
.ncr-create-banner .meta{font-size:11px; color:var(--ink-2); margin-top:3px; font-weight:500}

/* Radio chip groups */
.chip-pick{display:flex; gap:6px; flex-wrap:wrap}
.chip-pick button{
  padding:0 14px; height:38px; border:1.5px solid var(--line-strong); background:var(--card);
  border-radius:999px; font-family:inherit; font-size:12px; font-weight:700; color:var(--ink-2);
  display:inline-flex; align-items:center; gap:5px;
}
.chip-pick button.on{color:#fff}
.chip-pick button[data-val="crit"].on{background:var(--crit); border-color:var(--crit)}
.chip-pick button[data-val="high"].on{background:var(--gold); color:#7C2D12; border-color:var(--gold)}
.chip-pick button[data-val="med"].on{background:var(--sky); border-color:var(--sky); color:#fff}
.chip-pick button[data-val="low"].on{background:var(--muted); border-color:var(--muted); color:#fff}
.chip-pick.cat button.on{background:var(--teal); border-color:var(--teal); color:#fff}

/* Stop-work toggle row */
.sw-row{display:flex; align-items:center; gap:12px; padding:12px; background:linear-gradient(135deg,var(--error-soft),#FECACA); border:1px solid #FCA5A5; border-radius:10px; margin-top:6px}
.sw-row .sw-ic{font-size:22px}
.sw-row .sw-text{flex:1}
.sw-row .sw-text .t{font-size:12.5px; font-weight:800; color:var(--error-dark)}
.sw-row .sw-text .s{font-size:11px; color:var(--ink-2); margin-top:2px; font-weight:500; line-height:1.4}
.sw-row .sw-tgl{
  position:relative; width:44px; height:26px; background:#CBD5E1; border-radius:999px;
  transition:background .2s; cursor:pointer; flex-shrink:0;
}
.sw-row .sw-tgl::after{
  content:""; position:absolute; top:2px; left:2px; width:22px; height:22px;
  background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.sw-row .sw-tgl.on{background:var(--crit)}
.sw-row .sw-tgl.on::after{transform:translateX(18px)}

/* Photo upload row */
.upload-photos{display:flex; gap:8px; flex-wrap:wrap}
.upload-photos .ph{
  width:64px; height:64px; border-radius:10px;
  background:linear-gradient(135deg,#FECACA,#FCA5A5); color:var(--crit);
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.upload-photos .add{
  width:64px; height:64px; border-radius:10px; border:1.5px dashed var(--teal);
  background:var(--teal-bg); color:var(--teal-dark); font-family:inherit;
  font-size:11.5px; font-weight:700; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
}
.upload-photos .add .ico{font-size:18px}

/* === v9.0 — Web-style Owner Picker (horizontal table) === */
.op-header-info{padding:10px 14px; background:linear-gradient(135deg,#FEF3C7,#FDE68A); color:var(--warn-dark); font-size:11.5px; font-weight:700; line-height:1.5}
.op-table-wrap{
  margin:10px 14px; overflow-x:auto; overflow-y:hidden; border-radius:10px;
  border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow-card);
}
.op-table-wrap::-webkit-scrollbar{height:8px}
.op-table-wrap::-webkit-scrollbar-track{background:var(--surface); border-radius:99px}
.op-table-wrap::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:99px}

.op-table{display:flex; flex-direction:column}
.op-th, .op-row{
  display:grid;
  grid-template-columns:160px 110px 100px 56px 660px 90px;
  gap:8px; padding:10px 12px; align-items:center;
  min-width:1216px;
}
.op-th{
  background:var(--surface); border-bottom:1px solid var(--line-strong);
  font-size:10px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;
}
.op-row{
  border-top:1px solid var(--line); font-size:12px; background:var(--card);
  transition:background .12s;
}
.op-row:hover{background:var(--teal-bg)}
.op-row.picked{background:var(--teal-bg); box-shadow:inset 3px 0 0 var(--teal)}

.op-person{display:flex; align-items:center; gap:8px; min-width:0}
.op-avatar{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:11.5px;
}
.op-name-col{min-width:0}
.op-name{font-size:12px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.op-email{font-size:10px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.op-role{color:var(--ink-2); font-weight:600; font-size:11px}
.op-free{font-size:11px; font-weight:800; color:var(--success-dark)}
.op-free small{color:var(--muted); font-weight:500; margin-left:4px}
.op-tasks{font-size:13px; font-weight:800; text-align:center; font-family:'Inter',sans-serif}

.op-cal-head{display:grid; grid-template-columns:repeat(30, minmax(20px,1fr)); gap:2px; width:100%}
.op-cal{display:grid; grid-template-columns:repeat(30, minmax(20px,1fr)); gap:2px; width:100%}
.op-cal-d{
  text-align:center; font-size:9px; font-weight:700; color:var(--ink-2);
  padding:2px 0; line-height:1.2;
}
.op-cal-d.we{color:var(--muted)}
.op-cal-d .wkd{font-size:8px; color:var(--muted); margin-top:1px; display:block; font-weight:600}
.op-cal-cell{
  height:22px; border-radius:4px; background:#DDF6E7;
  position:relative;
}
.op-cal-cell.free{background:#DDF6E7}
.op-cal-cell.busy{
  background:linear-gradient(135deg, var(--coral), var(--coral-dark));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.op-cal-cell.we{background:var(--line)}
.op-cal-cell.next{box-shadow:inset 0 0 0 1.5px var(--teal); background:var(--teal-bg)}

.op-pick-btn{
  width:100%; padding:0 8px; height:32px; border-radius:7px;
  background:var(--teal); color:#fff; font-family:inherit;
  font-size:11px; font-weight:800; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:4px;
  white-space:nowrap;
}
.op-pick-btn.picked{background:#fff; color:var(--teal-dark); border:1.5px solid var(--teal)}
.op-pick-btn:active{transform:scale(.98)}

/* Legend */
.op-legend{
  display:flex; gap:10px; padding:10px 14px 80px;
  font-size:11px; color:var(--muted); flex-wrap:wrap; font-weight:600;
}
.op-legend .lg{display:inline-flex; align-items:center; gap:5px}
.op-legend .lg i{width:14px; height:14px; border-radius:4px; display:inline-block}
.op-legend .lg i.free{background:#DDF6E7}
.op-legend .lg i.busy{background:linear-gradient(135deg, var(--coral), var(--coral-dark))}
.op-legend .lg i.we{background:var(--line); border:1px solid var(--line-strong)}
.op-legend .lg i.next{background:var(--teal-bg); box-shadow:inset 0 0 0 1.5px var(--teal)}

/* Scroll hint */
.op-scroll-hint{
  font-size:11px; color:var(--muted); padding:8px 14px 4px; font-weight:600;
  display:flex; align-items:center; gap:5px;
}
.op-scroll-hint::before{content:"👈"}
.op-scroll-hint::after{content:"👉"; margin-left:auto}

/* Form: owner row in Create-NCR — now tap-able card instead of select */
/* Form: owner row in Create-NCR — now tap-able card instead of select */
.owner-tap-row{
  width:100%; border:1px solid var(--line-strong); border-radius:12px;
  padding:10px 14px; background:var(--card); cursor:pointer;
  display:flex; align-items:center; gap:10px;
  min-height:var(--input-h);
  font-family:inherit; text-align:left;
}
.owner-tap-row:active{background:var(--surface)}
.owner-tap-row .av{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:12px;
}
.owner-tap-row .text{flex:1; min-width:0}
.owner-tap-row .name{font-size:13px; font-weight:700; color:var(--ink); line-height:1.3}
.owner-tap-row .sub{font-size:11px; color:var(--muted); margin-top:2px; font-weight:500}
.owner-tap-row .chev{color:var(--muted); font-size:18px; flex-shrink:0}

/* === v17.0 — NCR Confirm Modal (overlay inside phone frame) === */
.ncr-confirm-overlay{
  position:absolute; inset:0; z-index:200;
  background:rgba(15,23,42,.55);
  display:flex; align-items:center; justify-content:center;
  padding:18px; animation:ncrConfirmIn .18s ease;
}
@keyframes ncrConfirmIn { from{opacity:0} to{opacity:1} }
.ncr-confirm-card{
  width:100%; max-width:340px;
  background:#fff; border-radius:18px;
  box-shadow:0 12px 32px rgba(15,23,42,.25);
  overflow:hidden;
  animation:ncrConfirmCard .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes ncrConfirmCard { from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} }
.ncr-confirm-ico{
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg,var(--error,#EF4444),var(--error-dark,#B91C1C));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:800; margin:18px auto 0;
  box-shadow:0 6px 18px rgba(239,68,68,.35);
}
.ncr-confirm-title{
  text-align:center; font-size:17px; font-weight:800;
  color:var(--ink); margin:14px 18px 4px;
}
.ncr-confirm-desc{
  text-align:center; font-size:13px; line-height:1.5;
  color:var(--ink-2,#475569); margin:0 22px 12px;
}
.ncr-confirm-context{
  margin:10px 18px 16px; padding:10px 12px;
  background:var(--error-soft,#FEE2E2); border:1px solid var(--error-light,#FCA5A5);
  border-radius:10px; font-size:12px;
}
.ncr-confirm-context .label{
  font-weight:700; color:var(--error-dark,#991B1B); display:block; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px;
}
.ncr-confirm-context .val{ color:var(--ink); font-weight:600 }
.ncr-confirm-actions{
  display:flex; gap:8px; padding:0 18px 18px;
}
.ncr-confirm-actions button{
  flex:1; padding:12px 14px; border-radius:12px; border:0;
  font-family:inherit; font-size:14px; font-weight:800;
  cursor:pointer; transition:all .12s;
}
.ncr-confirm-actions .cancel{
  background:var(--ink-100,#F1F5F9); color:var(--ink);
}
.ncr-confirm-actions .cancel:active{ background:var(--ink-200,#E2E8F0) }
.ncr-confirm-actions .confirm{
  background:linear-gradient(135deg,var(--error,#EF4444),var(--error-dark,#B91C1C));
  color:#fff; box-shadow:0 4px 12px rgba(239,68,68,.35);
}
.ncr-confirm-actions .confirm:active{ transform:translateY(1px) }

/* === v34.0 — Visible horizontal scrollbar for tab rows === */
/* Applies to L1 pills · Site pills · Dropdown chips · Sort chips */
.pk-wbsm-l1s,
.pk-modal-sites,
.pk-dd-chips,
.pk-sort,
.pk-project-filters{
  /* Enable custom scrollbar visibility (override v25 hide) */
  scrollbar-width:thin !important;
  scrollbar-color:var(--teal-soft) transparent !important;
  padding-bottom:10px !important;    /* room for scrollbar under pills */
  position:relative;
}
.pk-wbsm-l1s::-webkit-scrollbar,
.pk-modal-sites::-webkit-scrollbar,
.pk-dd-chips::-webkit-scrollbar,
.pk-sort::-webkit-scrollbar,
.pk-project-filters::-webkit-scrollbar{
  height:4px !important;
  display:block !important;
}
.pk-wbsm-l1s::-webkit-scrollbar-track,
.pk-modal-sites::-webkit-scrollbar-track,
.pk-dd-chips::-webkit-scrollbar-track,
.pk-sort::-webkit-scrollbar-track,
.pk-project-filters::-webkit-scrollbar-track{
  background:transparent;
}
.pk-wbsm-l1s::-webkit-scrollbar-thumb,
.pk-modal-sites::-webkit-scrollbar-thumb,
.pk-dd-chips::-webkit-scrollbar-thumb,
.pk-sort::-webkit-scrollbar-thumb,
.pk-project-filters::-webkit-scrollbar-thumb{
  background:var(--teal-soft);
  border-radius:99px;
}
.pk-wbsm-l1s:hover::-webkit-scrollbar-thumb,
.pk-modal-sites:hover::-webkit-scrollbar-thumb,
.pk-dd-chips:hover::-webkit-scrollbar-thumb,
.pk-sort:hover::-webkit-scrollbar-thumb,
.pk-project-filters:hover::-webkit-scrollbar-thumb{
  background:var(--teal);
}

/* Scroll hint chip · appears under L1 pills to indicate scrollable content */
.pk-wbsm-scrollhint{
  padding:4px 14px 8px; font-size:10px; color:var(--muted); font-weight:700;
  display:flex; align-items:center; gap:5px; letter-spacing:.03em;
  background:var(--card); border-bottom:1px solid var(--surface); font-style:italic
}
.pk-wbsm-scrollhint .arrow{color:var(--teal); font-weight:900; font-size:11px}

/* === v33.0 — WBS/Activity picker · Bottom Sheet Modal === */
/* Reuses pk-modal-backdrop, pk-modal-sheet, pk-modal-handle, pk-modal-header,
   pk-modal-search, pk-modal-body, pk-modal-foot from v31 for consistency.
   Adds WBS-specific classes below. */

/* L1 Pills row (like site pills) */
.pk-wbsm-l1s{padding:10px 14px 8px; display:flex; gap:8px;
  overflow-x:auto; overflow-y:hidden; border-bottom:1px solid var(--surface);
  scrollbar-width:none}
.pk-wbsm-l1s::-webkit-scrollbar{display:none}

.pk-wbsm-pill{flex-shrink:0; padding:8px 11px; border-radius:12px;
  background:var(--card); border:1.5px solid var(--line);
  display:flex; align-items:center; gap:8px; cursor:pointer; min-width:150px;
  transition:all .15s ease}
.pk-wbsm-pill:active{transform:scale(.98)}
.pk-wbsm-pill.on{border-color:var(--teal); background:var(--teal-bg);
  box-shadow:0 2px 8px rgba(43,168,162,.18)}

.pk-wbsm-pill-icon{width:32px; height:32px; border-radius:9px; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,.08)}
.pk-wbsm-pill-info{min-width:0; display:flex; flex-direction:column; gap:1px}
.pk-wbsm-pill-code{font-family:'Inter',monospace; font-size:10px; font-weight:800;
  color:var(--muted); letter-spacing:.02em; line-height:1}
.pk-wbsm-pill-name{font-size:11.5px; font-weight:800; color:var(--ink); line-height:1.15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:130px}
.pk-wbsm-pill.on .pk-wbsm-pill-code{color:var(--teal-dark)}
.pk-wbsm-pill.on .pk-wbsm-pill-name{color:var(--teal-dark)}

/* L1 Info Banner */
.pk-wbsm-info{padding:10px 14px 8px; color:#fff; display:grid;
  grid-template-columns:auto 1fr; gap:11px; align-items:center;
  border-bottom:1px solid var(--surface)}
.pk-wbsm-info-icon{width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.22); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0}
.pk-wbsm-info-body{min-width:0}
.pk-wbsm-info-line1{display:flex; align-items:center; gap:6px; margin-bottom:2px}
.pk-wbsm-info-code{background:rgba(0,0,0,.22); padding:1px 6px; border-radius:4px;
  font-family:'Inter',monospace; font-size:10px; font-weight:800; letter-spacing:.02em}
.pk-wbsm-info-name{font-size:12.5px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pk-wbsm-info-meta{font-size:10.5px; font-weight:600; opacity:.9; display:flex; gap:9px}

/* Guard chip (L3-only) */
.pk-wbsm-guard{margin:10px 14px 0; background:#FFF7E6; border:1.5px solid #F5D688; border-radius:9px;
  padding:8px 11px; font-size:11px; color:#8A5A00; font-weight:700;
  display:flex; align-items:center; gap:6px}

/* L2 section header */
.pk-wbsm-l2hdr{padding:14px 4px 6px; font-size:10.5px; color:var(--muted); font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; display:flex; align-items:center; gap:6px}
.pk-wbsm-l2hdr .code{font-family:'Inter',monospace; background:var(--card); border:1px solid var(--line);
  color:var(--ink-2); padding:1px 6px; border-radius:4px; font-size:10px; font-weight:800; letter-spacing:.02em}
.pk-wbsm-l2hdr .name{color:var(--ink-2); font-weight:800; letter-spacing:0; text-transform:none; font-size:11.5px}
.pk-wbsm-l2hdr .cnt{margin-left:auto; background:var(--card); border:1px solid var(--line); color:var(--muted);
  padding:1px 7px; border-radius:99px; font-size:10px; font-weight:800; font-family:'Inter',sans-serif; letter-spacing:0; text-transform:none}

/* L3 group (rounded card containing L3 rows with dividers) */
.pk-wbsm-l3group{background:var(--card); border:1px solid var(--line); border-radius:11px; overflow:hidden}
.pk-wbsm-l3row{display:grid; grid-template-columns:22px 1fr; gap:11px; align-items:center;
  padding:11px 14px; cursor:pointer; position:relative; min-height:64px}
.pk-wbsm-l3row + .pk-wbsm-l3row{border-top:1px solid var(--surface)}
.pk-wbsm-l3row:active{background:var(--surface)}
.pk-wbsm-l3row.on{background:linear-gradient(90deg,#F0FDFA,var(--card) 75%)}
.pk-wbsm-l3radio{width:22px; height:22px; border:2px solid var(--line-strong); border-radius:50%; flex-shrink:0; position:relative}
.pk-wbsm-l3row.on .pk-wbsm-l3radio{border-color:var(--teal); background:var(--teal)}
.pk-wbsm-l3row.on .pk-wbsm-l3radio::after{content:''; position:absolute; inset:4px; background:#fff; border-radius:50%}

.pk-wbsm-l3body{min-width:0}
.pk-wbsm-l3line1{display:flex; align-items:center; gap:6px; margin-bottom:3px}
.pk-wbsm-l3code{font-family:'Inter',monospace; background:#FFF7E6; color:#8A5A00;
  padding:1px 6px; border-radius:4px; font-size:10px; font-weight:800; letter-spacing:.02em}
.pk-wbsm-l3name{font-size:13.5px; font-weight:800; color:var(--ink); line-height:1.25; flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pk-wbsm-l3en{font-size:10.5px; color:var(--muted); font-weight:600; margin-bottom:6px}
.pk-wbsm-l3tags{display:flex; gap:5px; flex-wrap:wrap}
.pk-wbsm-l3tag{padding:1px 7px; border-radius:99px; font-size:9.5px; font-weight:800; letter-spacing:.02em}
.pk-wbsm-l3tag.ref{background:#EEF2FF; color:#4338CA}
.pk-wbsm-l3tag.tasks{background:#F1F5F9; color:#334155}

/* Breadcrumb (path indicator when selection made) */
.pk-wbsm-breadcrumb{margin:0 14px 6px; background:linear-gradient(135deg,var(--teal-bg),#E0F7F5);
  border:1.5px solid var(--teal-soft); border-radius:9px; padding:8px 11px;
  font-size:11px; color:var(--teal-dark); font-weight:700;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.pk-wbsm-breadcrumb .sep{color:var(--teal); opacity:.5}
.pk-wbsm-breadcrumb .cur{background:var(--teal); color:#fff; padding:1px 6px; border-radius:4px; font-size:10px; font-weight:800}

/* === v32.0 — Constrain modals/overlays to phone frame (desktop preview) === */
@media(min-width:431px){
  /* Modal backdrop (Site/Zone bottom sheet) · constrained to phone */
  .pk-modal-backdrop{
    inset:20px auto 20px 50% !important;
    transform:translateX(-50%);
    width:430px !important; max-width:430px !important;
    border-radius:36px !important;
    overflow:hidden !important;
  }
  /* Bottom sheet has to sit inside · adjust its border-radius to match phone */
  .pk-modal-backdrop .pk-modal-sheet{
    border-radius:0 0 36px 36px !important;
    max-height:none;
  }
  /* Actually · rounded-top look with bottom flush to phone bottom */
  .pk-modal-backdrop.pk-modal-backdrop{
    /* keep dim covering only phone screen */
  }

  /* Full-screen picker overlay (WBS · Inspector · Approver) · constrained to phone */
  .picker-overlay{
    inset:20px auto 20px 50% !important;
    transform:translateX(-50%);
    width:430px !important; max-width:430px !important;
    border-radius:36px !important;
    overflow:hidden !important;
  }
  .picker-overlay .picker-sheet{border-radius:36px !important}

  /* Project inline dropdown backdrop · constrained to phone */
  .pk-dd-backdrop{
    inset:20px auto 20px 50% !important;
    transform:translateX(-50%);
    width:430px !important; max-width:430px !important;
    border-radius:36px !important;
    overflow:hidden !important;
  }
}

/* On smaller widths (mobile), no override needed - full viewport is phone */

/* === v31.0 — Site/Zone picker · Bottom Sheet Modal === */
/* Backdrop with dim */
.pk-modal-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.55);
  z-index:400; display:flex; align-items:flex-end; animation:tmFade .18s ease}

/* Bottom sheet · slides up from bottom */
.pk-modal-sheet{background:var(--card); width:100%; max-height:88vh;
  border-radius:20px 20px 0 0; display:flex; flex-direction:column;
  box-shadow:0 -8px 32px rgba(0,0,0,.20);
  animation:modalSlideUp .28s cubic-bezier(.2,.85,.3,1);
  /* v32.0 — allow the sheet to grow to phone bottom (desktop) or viewport bottom (mobile) */
  align-self:flex-end}
@keyframes modalSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* Drag handle indicator (visual only) */
.pk-modal-handle{width:40px; height:4px; background:var(--line-strong); border-radius:99px;
  margin:8px auto 4px; opacity:.7}

/* Header */
.pk-modal-header{padding:8px 14px 12px; border-bottom:1px solid var(--surface);
  display:flex; align-items:flex-start; gap:8px}
.pk-modal-header .h-body{flex:1; min-width:0}
.pk-modal-header .h-title{font-size:15px; font-weight:800; color:var(--ink); line-height:1.3; margin-bottom:2px}
.pk-modal-header .h-sub{font-size:11.5px; color:var(--muted); font-weight:600}
.pk-modal-header .h-close{background:var(--surface); border:0; color:var(--ink-2);
  width:32px; height:32px; border-radius:50%; font-size:13px; font-weight:900; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0}
.pk-modal-header .h-close:active{background:var(--line)}

/* Site pills row */
.pk-modal-sites{padding:10px 14px 8px; display:flex; gap:8px;
  overflow-x:auto; overflow-y:hidden; border-bottom:1px solid var(--surface);
  scrollbar-width:none}
.pk-modal-sites::-webkit-scrollbar{display:none}

.pk-modal-site-pill{flex-shrink:0; padding:7px 11px; border-radius:12px;
  background:var(--card); border:1.5px solid var(--line);
  display:flex; align-items:center; gap:8px; cursor:pointer; min-width:130px;
  transition:all .15s ease}
.pk-modal-site-pill:active{transform:scale(.98)}
.pk-modal-site-pill.on{border-color:var(--teal); background:var(--teal-bg);
  box-shadow:0 2px 8px rgba(43,168,162,.18)}

.pk-modal-pill-icon{width:32px; height:32px; border-radius:9px; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,.08)}
.pk-modal-pill-info{min-width:0; display:flex; flex-direction:column; gap:1px}
.pk-modal-pill-code{font-family:'Inter',monospace; font-size:10px; font-weight:800; color:var(--muted); letter-spacing:.02em; line-height:1}
.pk-modal-pill-name{font-size:11.5px; font-weight:800; color:var(--ink); line-height:1.15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:110px}
.pk-modal-site-pill.on .pk-modal-pill-code{color:var(--teal-dark)}
.pk-modal-site-pill.on .pk-modal-pill-name{color:var(--teal-dark)}

/* Site info banner (below pills, above zones) */
.pk-modal-info{padding:10px 14px 8px; background:linear-gradient(135deg,var(--teal-bg),#E6F7F5);
  border-bottom:1px solid var(--teal-soft); display:grid;
  grid-template-columns:auto 1fr; gap:10px; align-items:center}
.pk-modal-info-icon{width:36px; height:36px; border-radius:10px; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;
  box-shadow:0 1px 4px rgba(0,0,0,.10)}
.pk-modal-info-body{min-width:0}
.pk-modal-info-line1{display:flex; align-items:center; gap:6px; margin-bottom:2px}
.pk-modal-info-code{font-family:'Inter',monospace; background:var(--teal); color:#fff;
  padding:1px 6px; border-radius:4px; font-size:10px; font-weight:800; letter-spacing:.02em}
.pk-modal-info-name{font-size:12.5px; font-weight:800; color:var(--teal-dark);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pk-modal-info-meta{font-size:10.5px; color:var(--teal-dark); font-weight:600; opacity:.85;
  display:flex; gap:9px}

/* Search bar (inline · minimal) */
.pk-modal-search{padding:9px 14px 4px; background:var(--card); position:sticky; top:0; z-index:1}
.pk-modal-search-wrap{position:relative}
.pk-modal-search-wrap .icon{position:absolute; left:11px; top:50%; transform:translateY(-50%);
  color:var(--muted); font-size:13px; pointer-events:none}
.pk-modal-search input{width:100%; padding:8px 32px 8px 32px; border:1.5px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:12.5px; background:var(--surface); outline:none}
.pk-modal-search input:focus{border-color:var(--teal); background:var(--card)}
.pk-modal-search-wrap .clear{position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:var(--line-strong); color:#fff; border:0; width:18px; height:18px; border-radius:50%;
  font-size:10px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center}

/* Zone list body */
.pk-modal-body{flex:1; overflow-y:auto; padding:8px 14px 12px; -webkit-overflow-scrolling:touch}
.pk-modal-body::-webkit-scrollbar{width:5px}
.pk-modal-body::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:99px}

.pk-modal-section-hdr{padding:6px 4px 8px; font-size:10.5px; color:var(--muted); font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; gap:6px}
.pk-modal-section-hdr .cnt{background:var(--card); border:1px solid var(--line); color:var(--ink-2);
  padding:1px 7px; border-radius:99px; font-size:10px; font-weight:800; font-family:'Inter',sans-serif; letter-spacing:0; text-transform:none}

.pk-modal-zone-group{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.pk-modal-zone-row{display:grid; grid-template-columns:44px 1fr 24px; gap:11px; align-items:center;
  padding:11px 14px; cursor:pointer; position:relative; min-height:72px}
.pk-modal-zone-row + .pk-modal-zone-row{border-top:1px solid var(--surface)}
.pk-modal-zone-row:active{background:var(--surface)}
.pk-modal-zone-row.on{background:linear-gradient(90deg,#F0FDFA,var(--card) 75%)}
.pk-modal-zone-icon{width:44px; height:44px; border-radius:11px; background:var(--surface);
  border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0}
.pk-modal-zone-row.on .pk-modal-zone-icon{background:var(--card); border-color:var(--teal)}
.pk-modal-zone-body{min-width:0}
.pk-modal-zone-line1{display:flex; align-items:center; gap:6px; margin-bottom:2px}
.pk-modal-zone-code{font-family:'Inter',monospace; background:var(--surface); color:var(--ink-2);
  padding:1px 6px; border-radius:4px; font-size:9.5px; font-weight:800}
.pk-modal-zone-name{font-size:13.5px; font-weight:800; color:var(--ink); line-height:1.25; flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pk-modal-zone-desc{font-size:11px; color:var(--muted); font-weight:600; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:5px}
.pk-modal-zone-tags{display:flex; gap:5px; flex-wrap:wrap}
.pk-modal-zone-tag{padding:1px 7px; border-radius:99px; font-size:9.5px; font-weight:800; letter-spacing:.02em}
.pk-modal-zone-tag.tasks{background:#F1F5F9; color:#334155}
.pk-modal-zone-radio{width:22px; height:22px; border:2px solid var(--line-strong); border-radius:50%; flex-shrink:0; position:relative}
.pk-modal-zone-row.on .pk-modal-zone-radio{border-color:var(--teal); background:var(--teal)}
.pk-modal-zone-row.on .pk-modal-zone-radio::after{content:''; position:absolute; inset:4px; background:#fff; border-radius:50%}

/* Sticky footer */
.pk-modal-foot{padding:10px 14px calc(env(safe-area-inset-bottom,0) + 10px);
  border-top:1px solid var(--line); background:var(--card); display:flex; gap:8px;
  box-shadow:0 -2px 8px rgba(15,23,42,.05)}
.pk-modal-foot .cancel{flex:0 0 100px; background:var(--surface); color:var(--ink); border:1.5px solid var(--line-strong);
  padding:11px; border-radius:11px; font-family:inherit; font-size:13px; font-weight:800}
.pk-modal-foot .confirm{flex:1; background:linear-gradient(135deg,var(--teal),var(--teal-dark)); color:#fff;
  border:0; padding:11px; border-radius:11px; font-family:inherit; font-size:13px; font-weight:800;
  box-shadow:0 3px 10px rgba(43,168,162,.30)}
.pk-modal-foot .confirm:disabled{opacity:.45; box-shadow:none}

/* Empty state */
.pk-modal-empty{padding:32px 14px; text-align:center; color:var(--muted)}
.pk-modal-empty .icon{font-size:32px; opacity:.5; margin-bottom:6px}
.pk-modal-empty .title{font-size:13px; font-weight:800; color:var(--ink-2); margin-bottom:3px}
.pk-modal-empty .desc{font-size:11px}

/* Hide v30 site step-indicator + site cards (no longer used) */
.pk-step-ind, .pk-site-card, .pk-site-banner{display:none !important}

/* === v30.0 — Site/Zone picker · Two-step Mobile App popup === */
/* Step indicator (progress dots at top) */
.pk-step-ind{padding:8px 14px; background:var(--card); border-bottom:1px solid var(--surface);
  display:flex; align-items:center; justify-content:center; gap:8px; position:sticky; top:0; z-index:2}
.pk-step-dot{width:9px; height:9px; border-radius:50%; background:var(--line-strong); transition:all .18s ease}
.pk-step-dot.on{background:var(--teal); box-shadow:0 0 0 3px rgba(43,168,162,.22)}
.pk-step-dot.done{background:var(--teal)}
.pk-step-line{flex:0 0 32px; height:2px; background:var(--line-strong); border-radius:99px}
.pk-step-line.done{background:var(--teal)}
.pk-step-label{font-size:11px; color:var(--muted); font-weight:700; margin-left:8px}
.pk-step-label b{color:var(--teal-dark); font-weight:800}

/* STEP 1 · Site cards */
.pk-site-card{background:var(--card); border:1.5px solid var(--line); border-radius:14px;
  margin-bottom:11px; overflow:hidden; cursor:pointer; transition:transform .15s ease; position:relative}
.pk-site-card:active{transform:scale(.99)}
.pk-site-card.on{border-color:var(--teal); box-shadow:0 4px 12px rgba(43,168,162,.20)}

.pk-sc-banner{padding:12px 14px; color:#fff; display:flex; align-items:center; gap:12px}
.pk-sc-icon{width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.22); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0}
.pk-sc-code{background:rgba(0,0,0,.22); padding:2px 8px; border-radius:5px; font-family:'Inter',monospace;
  font-size:10.5px; font-weight:800; letter-spacing:.02em}
.pk-sc-cat{margin-left:auto; padding:3px 9px; border-radius:99px; font-size:10.5px; font-weight:700;
  background:rgba(255,255,255,.24); backdrop-filter:blur(4px)}

.pk-sc-body{padding:11px 14px 12px}
.pk-sc-name{font-size:14.5px; font-weight:800; color:var(--ink); line-height:1.3; margin-bottom:3px}
.pk-sc-loc{font-size:11.5px; color:var(--muted); font-weight:600; margin-bottom:10px}

.pk-sc-stats{display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:8px; align-items:center}
.pk-sc-stat{background:var(--surface); border-radius:9px; padding:7px 6px; text-align:center}
.pk-sc-stat .icon{font-size:12px; opacity:.75; margin-bottom:2px}
.pk-sc-stat .n{font-size:13px; font-weight:800; color:var(--ink); font-family:'Inter',sans-serif; line-height:1}
.pk-sc-stat .l{font-size:9.5px; color:var(--muted); font-weight:700; margin-top:3px}
.pk-sc-go{width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  color:#fff; font-weight:900; font-size:16px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(43,168,162,.25); flex-shrink:0}

/* STEP 2 · Site info banner + zone list */
.pk-site-banner{background:linear-gradient(135deg,var(--teal-bg),#E0F7F5); border:1.5px solid var(--teal-soft);
  border-radius:12px; padding:10px 12px; margin-bottom:12px; display:grid;
  grid-template-columns:auto 1fr auto; gap:11px; align-items:center}
.pk-sb-icon{width:36px; height:36px; border-radius:9px; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; box-shadow:0 1px 4px rgba(0,0,0,.10)}
.pk-sb-body{min-width:0}
.pk-sb-label{font-size:9.5px; color:var(--teal-dark); font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-bottom:1px; opacity:.75}
.pk-sb-name{font-size:13px; font-weight:800; color:var(--teal-dark); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pk-sb-back{background:var(--card); border:1.5px solid var(--teal-soft); color:var(--teal-dark);
  padding:6px 11px; border-radius:9px; font-family:inherit; font-size:10.5px; font-weight:800; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap}

.pk-zone-section-hdr{padding:6px 4px 8px; font-size:10.5px; color:var(--muted); font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; gap:6px}
.pk-zone-section-hdr .cnt{background:var(--card); border:1px solid var(--line); color:var(--ink-2);
  padding:1px 7px; border-radius:99px; font-size:10px; font-weight:800; font-family:'Inter',sans-serif; letter-spacing:0; text-transform:none}

.pk-zone-group{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:14px}
.pk-zone-item{display:grid; grid-template-columns:44px 1fr 24px; gap:11px; align-items:center;
  padding:11px 14px; cursor:pointer; position:relative; min-height:76px}
.pk-zone-item + .pk-zone-item{border-top:1px solid var(--surface)}
.pk-zone-item:active{background:var(--surface)}
.pk-zone-item.on{background:linear-gradient(90deg,#F0FDFA,var(--card) 75%)}

.pk-zi-icon{width:44px; height:44px; border-radius:12px; background:var(--surface); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0}
.pk-zone-item.on .pk-zi-icon{background:var(--card); border-color:var(--teal)}

.pk-zi-body{min-width:0}
.pk-zi-line1{display:flex; align-items:center; gap:6px; margin-bottom:2px}
.pk-zi-code{font-family:'Inter',monospace; background:var(--surface); color:var(--ink-2);
  padding:1px 6px; border-radius:4px; font-size:9.5px; font-weight:800}
.pk-zi-name{font-size:13.5px; font-weight:800; color:var(--ink); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1}
.pk-zi-sub{font-size:11px; color:var(--muted); font-weight:600; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pk-zi-tags{display:flex; gap:5px; margin-top:5px; flex-wrap:wrap}
.pk-zi-tag{padding:1px 7px; border-radius:99px; font-size:9.5px; font-weight:800; letter-spacing:.02em}
.pk-zi-tag.tasks{background:#F1F5F9; color:#334155}

.pk-zi-radio{width:22px; height:22px; border:2px solid var(--line-strong); border-radius:50%; flex-shrink:0; position:relative}
.pk-zone-item.on .pk-zi-radio{border-color:var(--teal); background:var(--teal)}
.pk-zone-item.on .pk-zi-radio::after{content:''; position:absolute; inset:4px; background:#fff; border-radius:50%}

/* Overrides: hide v25 site picker markup (replaced) */
.pk-site, .pk-site-head, .pk-zone-list, .pk-zone{display:none !important}

/* === v29.0 — Project field · Inline Dropdown === */
/* Form-grp with dropdown open needs positioning context */
.form-grp.pk-dd-open{position:relative; z-index:220}
.form-grp.pk-dd-open .form-trigger{border-color:var(--teal); box-shadow:0 0 0 3px rgba(43,168,162,.15)}
.form-grp.pk-dd-open .form-trigger .chev{transform:rotate(180deg)}
.form-trigger .chev{transition:transform .18s ease}

/* Backdrop */
.pk-dd-backdrop{position:fixed; inset:0; background:transparent; z-index:210; animation:tmFade .15s ease}

/* Dropdown panel */
.pk-dd-panel{position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:230;
  background:var(--card); border:1.5px solid var(--teal-soft); border-radius:14px;
  box-shadow:0 12px 32px rgba(15,23,42,.14), 0 4px 10px rgba(15,23,42,.08);
  overflow:hidden; animation:ddSlide .18s ease}
@keyframes ddSlide{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:translateY(0)}}

/* Search inside dropdown */
.pk-dd-search{padding:9px 10px 7px; border-bottom:1px solid var(--surface); background:var(--card); position:sticky; top:0; z-index:2}
.pk-dd-search-wrap{position:relative}
.pk-dd-search-wrap .icon{position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:12px; pointer-events:none}
.pk-dd-search input{width:100%; padding:7px 30px 7px 30px; border:1.5px solid var(--line); border-radius:9px;
  font-family:inherit; font-size:12.5px; background:var(--surface); outline:none}
.pk-dd-search input:focus{border-color:var(--teal); background:var(--card)}
.pk-dd-search-wrap .clear{position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:var(--line-strong); color:#fff; border:0; width:18px; height:18px; border-radius:50%;
  font-size:10px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center}

/* Filter chips row (compact) */
.pk-dd-chips{display:flex; gap:5px; padding:8px 10px; overflow-x:auto; border-bottom:1px solid var(--surface); background:var(--card)}
.pk-dd-chips::-webkit-scrollbar{display:none}
.pk-dd-chip{background:var(--surface); border:1px solid var(--line); color:var(--muted);
  padding:4px 10px; border-radius:12px; font-family:inherit; font-size:10.5px; font-weight:800;
  cursor:pointer; white-space:nowrap; flex-shrink:0; display:inline-flex; align-items:center; gap:4px}
.pk-dd-chip .n{background:transparent; padding:0; font-family:'Inter',sans-serif; font-size:9.5px; opacity:.7}
.pk-dd-chip.on{background:var(--teal); border-color:var(--teal); color:#fff}
.pk-dd-chip.on .n{color:#fff; opacity:.95}

/* Scrollable list */
.pk-dd-list{max-height:360px; overflow-y:auto; background:var(--card)}
.pk-dd-list::-webkit-scrollbar{width:5px}
.pk-dd-list::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:99px}

/* Project row (compact for dropdown) */
.pk-dd-item{display:grid; grid-template-columns:40px 1fr 20px; gap:10px; align-items:center;
  padding:10px 12px 10px 10px; cursor:pointer; border-bottom:1px solid var(--surface); position:relative;
  min-height:64px}
.pk-dd-item:last-child{border-bottom:0}
.pk-dd-item:active{background:var(--surface)}
.pk-dd-item.on{background:linear-gradient(90deg,#F0FDFA,var(--card) 80%)}
.pk-dd-thumb{width:40px; height:40px; border-radius:10px; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px;
  letter-spacing:.02em; flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,.08)}
.pk-dd-body{min-width:0}
.pk-dd-line1{display:flex; align-items:center; gap:6px; margin-bottom:2px}
.pk-dd-name{font-size:13px; font-weight:800; color:var(--ink); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1}
.pk-dd-code{font-family:'Inter',monospace; background:var(--surface); color:var(--ink-2);
  padding:1px 6px; border-radius:4px; font-size:9.5px; font-weight:800; flex-shrink:0; letter-spacing:.02em}
.pk-dd-sub{font-size:10.5px; color:var(--muted); font-weight:600; line-height:1.25; margin-bottom:5px;
  display:flex; align-items:center; gap:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pk-dd-sub .dot{color:var(--line-strong)}
.pk-dd-sub .cat{color:var(--ink-2); font-weight:700}
.pk-dd-prog{display:flex; align-items:center; gap:6px}
.pk-dd-prog .bar{flex:1; height:3.5px; background:var(--surface); border-radius:99px; overflow:hidden; max-width:100px}
.pk-dd-prog .fill{height:100%; border-radius:99px}
.pk-dd-prog .pct{font-family:'Inter',sans-serif; font-size:10px; font-weight:800; color:var(--ink-2); min-width:26px}
.pk-dd-prog .badge{padding:1px 6px; border-radius:99px; font-size:9px; font-weight:800; letter-spacing:.02em}
.pk-dd-acc{color:var(--muted); font-size:15px; text-align:center; line-height:1; font-weight:400}
.pk-dd-item.on .pk-dd-acc{color:var(--teal); font-weight:900; font-size:16px}

/* Empty state inside dropdown */
.pk-dd-empty{padding:28px 14px; text-align:center; color:var(--muted)}
.pk-dd-empty .icon{font-size:24px; opacity:.5; margin-bottom:6px}
.pk-dd-empty .title{font-size:12.5px; font-weight:800; color:var(--ink-2); margin-bottom:2px}
.pk-dd-empty .desc{font-size:10.5px}

/* Bottom label */
.pk-dd-count{padding:6px 12px; font-size:10px; color:var(--muted); font-weight:700;
  background:var(--surface); border-top:1px solid var(--line); text-align:center}

/* Trigger's chev to dropdown symbol */
.form-trigger[data-open-picker="project"] .chev::before{content:'▼'; font-size:9px; font-weight:900}
.form-trigger[data-open-picker="project"] .chev{font-size:0; color:var(--muted)}

/* === v28.0 — Project picker · TRUE native mobile-app screen · grouped table === */

/* Override picker sheet base for iOS-like feel */
.pk-app-screen{background:#F2F2F7}   /* iOS system group background */

/* Large title (iOS pattern) - big title at top of body */
.pk-lg-title{padding:14px 18px 6px}
.pk-lg-title .t{font-size:22px; font-weight:900; color:var(--ink); letter-spacing:-.01em; line-height:1.15}
.pk-lg-title .s{font-size:12.5px; color:var(--muted); font-weight:600; margin-top:2px}

/* Hero card (shown when a project is currently selected) */
.pk-hero{margin:8px 14px 12px; background:linear-gradient(135deg,#0F766E,#2BA8A2);
  border-radius:16px; padding:14px 15px; color:#fff; position:relative; overflow:hidden;
  box-shadow:0 6px 18px rgba(15,118,110,.25)}
.pk-hero::after{content:''; position:absolute; top:-40px; right:-40px; width:140px; height:140px;
  background:radial-gradient(circle, rgba(255,255,255,.16) 0%, transparent 70%); border-radius:50%}
.pk-hero-top{display:flex; align-items:center; gap:10px; margin-bottom:10px; position:relative}
.pk-hero-thumb{width:44px; height:44px; border-radius:11px; background:rgba(255,255,255,.22); backdrop-filter:blur(4px);
  color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.pk-hero-txt{flex:1; min-width:0}
.pk-hero-label{font-size:10px; text-transform:uppercase; letter-spacing:.08em; opacity:.85; font-weight:800; margin-bottom:2px}
.pk-hero-name{font-size:15px; font-weight:800; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pk-hero-clear{background:rgba(255,255,255,.24); border:0; color:#fff; width:28px; height:28px; border-radius:50%;
  font-weight:800; font-size:14px; cursor:pointer; flex-shrink:0}
.pk-hero-stats{display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:10px; align-items:center; position:relative}
.pk-hero-stat{text-align:center}
.pk-hero-stat .n{font-size:16px; font-weight:900; font-family:'Inter',sans-serif; line-height:1}
.pk-hero-stat .l{font-size:9.5px; opacity:.85; font-weight:700; margin-top:3px; text-transform:uppercase; letter-spacing:.03em}
.pk-hero-ring{position:relative; display:flex; align-items:center; justify-content:center; padding-left:6px}
.pk-hero-ring .pct{position:absolute; font-family:'Inter',sans-serif; font-size:11px; font-weight:800; color:#fff}

/* Grouped-table section (iOS Settings-style) */
.pk-gsec-header{padding:16px 18px 6px 18px; font-size:11px; color:#6B7280; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; display:flex; align-items:center; gap:6px}
.pk-gsec-header .cnt{background:#E5E7EB; color:#374151; padding:1px 7px; border-radius:99px;
  font-size:10.5px; font-weight:800; font-family:'Inter',sans-serif; letter-spacing:0; text-transform:none}

.pk-gsec{background:var(--card); margin:0 14px 6px; border-radius:12px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04)}
.pk-gcell{display:grid; grid-template-columns:60px 1fr 28px; gap:12px; align-items:center;
  padding:12px 14px 12px 12px; cursor:pointer; position:relative; min-height:92px;
  transition:background .12s ease}
.pk-gcell + .pk-gcell{border-top:1px solid #F1F5F9}
.pk-gcell:active{background:#F8FAFC}
.pk-gcell.on{background:linear-gradient(90deg,#F0FDFA,#FFFFFF 70%)}

.pk-gthumb{width:60px; height:60px; border-radius:14px; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px;
  letter-spacing:.02em; flex-shrink:0; box-shadow:0 2px 5px rgba(0,0,0,.10)}
.pk-gthumb-code{position:absolute; top:6px; left:6px; background:rgba(0,0,0,.28); color:#fff;
  padding:1px 5px; border-radius:4px; font-family:'Inter',monospace; font-size:8.5px; font-weight:800; letter-spacing:.02em}

.pk-gbody{min-width:0}
.pk-gtitle{font-size:14.5px; font-weight:800; color:#0F172A; line-height:1.25; margin-bottom:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pk-gsub{font-size:11.5px; color:#64748B; font-weight:600; line-height:1.3; margin-bottom:6px;
  display:flex; align-items:center; gap:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pk-gsub .dot{color:#CBD5E1; font-weight:900}
.pk-gsub .cat{color:#334155; font-weight:700}
.pk-gprog{display:flex; align-items:center; gap:8px}
.pk-gprog .bar{flex:1; height:4px; background:#F1F5F9; border-radius:99px; overflow:hidden}
.pk-gprog .fill{height:100%; border-radius:99px; transition:width .3s ease}
.pk-gprog .pct{font-family:'Inter',sans-serif; font-size:10.5px; font-weight:800; color:#334155; min-width:34px; text-align:right}
.pk-gprog .badge{padding:1px 7px; border-radius:99px; font-size:9.5px; font-weight:800; letter-spacing:.02em; white-space:nowrap}

.pk-gacc{color:#94A3B8; font-size:20px; font-weight:400; text-align:center; line-height:1}
.pk-gcell.on .pk-gacc{color:transparent}
.pk-gcell.on .pk-gacc::after{content:''; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:50%; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:13px;
  box-shadow:0 2px 6px rgba(43,168,162,.35)}
.pk-gcell.on .pk-gacc::after{content:'✓'}

/* Floating confirm bar (iOS safe-area style) */
.pk-app-foot{position:sticky; bottom:0; background:var(--card); border-top:1px solid #E5E7EB;
  padding:11px 14px calc(env(safe-area-inset-bottom, 0) + 10px);
  display:flex; gap:8px; box-shadow:0 -3px 10px rgba(15,23,42,.06)}
.pk-app-foot .cancel{flex:0 0 100px; background:#F1F5F9; color:#334155; border:0;
  padding:11px; border-radius:12px; font-family:inherit; font-size:13px; font-weight:800}
.pk-app-foot .confirm{flex:1; background:linear-gradient(135deg,var(--teal),var(--teal-dark)); color:#fff;
  border:0; padding:11px; border-radius:12px; font-family:inherit; font-size:13px; font-weight:800;
  box-shadow:0 4px 10px rgba(43,168,162,.30)}
.pk-app-foot .confirm:disabled{opacity:.45; box-shadow:none}

/* Hide v27 & v26 project picker elements (replaced) */
.pk-pselected, .pk-plist, .pk-plist-label{display:none !important}

/* Keep segmented control (v27) but slightly tune for v28 */
.pk-seg{background:#F2F2F7 !important; padding-top:8px !important; padding-bottom:6px !important}

/* Search bar: adapt to iOS grouped look */
.picker-sheet.pk-app-screen .pk-search{background:#F2F2F7; border-bottom:0; padding:6px 14px 8px}
.picker-sheet.pk-app-screen .pk-search input{background:#E5E5EA; border-color:transparent; border-radius:10px; padding-top:8px; padding-bottom:8px}

/* Empty state adjustments */
.picker-sheet.pk-app-screen .pk-empty{background:transparent}

/* === v27.0 — Project picker · TRUE mobile-native list layout === */
/* Sticky selected pill (single line, replaces v26 hero card) */
.pk-pselected{padding:9px 14px; background:linear-gradient(90deg,#F0FDFA,#E0F7F5);
  border-bottom:1px solid var(--teal-soft); display:flex; align-items:center; gap:9px}
.pk-pselected .icon{width:24px; height:24px; border-radius:50%; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; flex-shrink:0}
.pk-pselected .text{flex:1; font-size:11.5px; color:var(--teal-dark); font-weight:700; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pk-pselected .clear{background:transparent; border:0; color:var(--teal-dark); font-size:16px; padding:4px 6px; cursor:pointer; font-weight:800}

/* Segmented control (full-width 4-way) */
.pk-seg{padding:9px 14px; background:var(--surface); position:sticky; top:52px; z-index:1; border-bottom:1px solid var(--surface)}
.pk-seg-inner{display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:var(--line); padding:3px; border-radius:11px}
.pk-seg-btn{background:transparent; border:0; padding:8px 4px; border-radius:9px;
  font-family:inherit; font-size:11.5px; font-weight:700; color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:5px; transition:all .15s ease}
.pk-seg-btn .n{background:transparent; padding:0; font-family:'Inter',sans-serif; font-size:10.5px; font-weight:800; opacity:.7}
.pk-seg-btn.on{background:var(--card); color:var(--teal-dark); box-shadow:0 1px 3px rgba(0,0,0,.08)}
.pk-seg-btn.on .n{color:var(--teal); opacity:1}

/* Native list row (thumb · body · accessory) */
.pk-plist{background:var(--card); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; margin-bottom:12px}
.pk-prow{display:grid; grid-template-columns:56px 1fr 24px; gap:12px; align-items:center;
  padding:12px 14px; border-bottom:1px solid var(--surface); cursor:pointer;
  min-height:88px; transition:background .12s ease}
.pk-prow:last-child{border-bottom:0}
.pk-prow:active{background:var(--surface)}
.pk-prow.on{background:linear-gradient(90deg,#F0FDFA,var(--card))}
.pk-prow.on .pk-prow-accessory{color:var(--teal); font-size:20px; font-weight:900}

.pk-prow-thumb{width:56px; height:56px; border-radius:12px; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px;
  letter-spacing:.02em; flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,.10)}

.pk-prow-body{min-width:0}
.pk-prow-title{font-size:14.5px; font-weight:800; color:var(--ink); line-height:1.3; margin-bottom:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pk-prow-sub{font-size:11.5px; color:var(--muted); font-weight:600; line-height:1.35;
  margin-bottom:6px; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.pk-prow-sub .cat{color:var(--ink-2); font-weight:700}
.pk-prow-sub .dot{color:var(--line-strong)}

/* Linear progress bar under sub line */
.pk-prow-prog{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--ink-2); font-weight:700; margin-bottom:3px}
.pk-prow-bar{flex:1; height:5px; background:var(--surface); border-radius:99px; overflow:hidden; position:relative}
.pk-prow-bar-fill{height:100%; border-radius:99px; transition:width .3s ease}
.pk-prow-pct{font-family:'Inter',sans-serif; font-size:11px; font-weight:800; color:var(--ink); flex-shrink:0; min-width:32px; text-align:right}
.pk-prow-status{display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:99px;
  font-size:9.5px; font-weight:800; letter-spacing:.02em}

.pk-prow-meta{font-size:10.5px; color:var(--muted); font-weight:600; display:flex; gap:8px; margin-top:2px}
.pk-prow-meta .code{font-family:'Inter',monospace; font-weight:800; color:var(--ink-2); background:var(--surface); padding:1px 6px; border-radius:4px; font-size:10px}

.pk-prow-accessory{color:var(--muted); font-size:18px; text-align:center; font-weight:800}

/* Section label */
.pk-plist-label{font-size:10.5px; color:var(--muted); font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:14px 4px 6px; display:flex; align-items:center; gap:6px}
.pk-plist-label .cnt{background:var(--card); border:1px solid var(--line); color:var(--ink-2);
  padding:1px 7px; border-radius:99px; font-size:10px; font-weight:800; font-family:'Inter',sans-serif; letter-spacing:0; text-transform:none}

/* Hide v26 project picker components entirely (replaced by v27 rows) */
.pk-project-hero, .pk-project-filters, .pk-project-card, .pk-project{display:none !important}

/* === v26.0 — Project picker · mobile-app native redesign === */
/* Hero card at top of picker body */
.pk-project-hero{background:linear-gradient(135deg,var(--teal-dark),var(--teal));
  border-radius:14px; padding:14px; margin-bottom:12px; color:#fff;
  box-shadow:0 4px 12px rgba(43,168,162,.28); position:relative; overflow:hidden}
.pk-project-hero::before{content:''; position:absolute; top:-30px; right:-30px; width:120px; height:120px;
  background:rgba(255,255,255,.08); border-radius:50%}
.pk-project-hero .hero-label{font-size:10.5px; font-weight:800; letter-spacing:.05em; opacity:.85; text-transform:uppercase; margin-bottom:6px}
.pk-project-hero .hero-body{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; position:relative}
.pk-project-hero .hero-name{font-size:16px; font-weight:800; line-height:1.3; margin-bottom:4px}
.pk-project-hero .hero-code{display:inline-block; background:rgba(255,255,255,.22); backdrop-filter:blur(4px);
  padding:2px 8px; border-radius:5px; font-family:'Inter',monospace; font-size:10.5px; font-weight:800; margin-bottom:6px}
.pk-project-hero .hero-loc{font-size:11px; opacity:.85; font-weight:600}
.pk-project-hero .hero-ring{background:rgba(255,255,255,.15); border-radius:50%; padding:2px}
.pk-project-hero .hero-pct{position:absolute; font-size:12px; font-weight:800; color:#fff}

/* Filter chips row */
.pk-project-filters{padding:9px 14px; background:var(--surface); display:flex; gap:6px;
  overflow-x:auto; position:sticky; top:52px; z-index:1; border-bottom:1px solid var(--surface)}
.pk-project-filters::-webkit-scrollbar{display:none}
.pk-pf-chip{background:var(--card); border:1.5px solid var(--line); color:var(--ink-2);
  padding:6px 12px; border-radius:14px; font-family:inherit; font-size:11.5px; font-weight:700;
  cursor:pointer; white-space:nowrap; flex-shrink:0; display:inline-flex; align-items:center; gap:5px}
.pk-pf-chip .n{background:var(--surface); padding:1px 6px; border-radius:99px; font-size:10px; font-weight:800; color:var(--muted); font-family:'Inter',sans-serif}
.pk-pf-chip.on{background:var(--teal); border-color:var(--teal); color:#fff}
.pk-pf-chip.on .n{background:rgba(255,255,255,.28); color:#fff}

/* Enhanced project card (v26) */
.pk-project-card{background:var(--card); border:1.5px solid var(--line); border-radius:14px;
  margin-bottom:11px; overflow:hidden; cursor:pointer; position:relative; transition:transform .15s ease}
.pk-project-card:active{transform:scale(.99)}
.pk-project-card.on{border-color:var(--teal); box-shadow:0 4px 14px rgba(43,168,162,.22)}
.pk-project-card.on::after{content:'✓'; position:absolute; top:10px; right:10px;
  width:28px; height:28px; border-radius:50%; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:15px;
  box-shadow:0 2px 6px rgba(43,168,162,.4); z-index:2}
.pk-pc-banner{padding:12px 14px 10px; color:#fff; display:flex; align-items:center; gap:11px}
.pk-pc-thumb{width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.22); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; letter-spacing:.02em; flex-shrink:0}
.pk-pc-code{background:rgba(255,255,255,.22); backdrop-filter:blur(4px); padding:2px 8px; border-radius:5px;
  font-family:'Inter',monospace; font-size:10.5px; font-weight:800; letter-spacing:.02em}
.pk-pc-status{margin-left:auto; padding:3px 9px; border-radius:99px; font-size:10.5px; font-weight:800;
  background:rgba(255,255,255,.24); backdrop-filter:blur(4px)}
.pk-pc-body{padding:11px 14px 13px}
.pk-pc-name{font-size:14.5px; font-weight:800; color:var(--ink); line-height:1.3; margin-bottom:5px; padding-right:36px}
.pk-pc-loc{font-size:11.5px; color:var(--muted); font-weight:600; margin-bottom:10px; display:flex; align-items:center; gap:5px}
.pk-pc-grid{display:grid; grid-template-columns:1fr 1fr 1fr 60px; gap:8px; align-items:center}
.pk-pc-stat{background:var(--surface); border-radius:9px; padding:7px 6px; text-align:center}
.pk-pc-stat .icon{font-size:14px; opacity:.75; margin-bottom:2px}
.pk-pc-stat .n{font-size:13px; font-weight:800; color:var(--ink); font-family:'Inter',sans-serif; line-height:1}
.pk-pc-stat .l{font-size:9.5px; color:var(--muted); font-weight:600; margin-top:3px; line-height:1.1}
.pk-pc-ring{position:relative; display:flex; align-items:center; justify-content:center}
.pk-pc-ring .pct{position:absolute; font-family:'Inter',sans-serif; font-size:11px; font-weight:800; color:var(--ink)}
.pk-pc-tags{display:flex; gap:5px; flex-wrap:wrap; margin-top:8px}
.pk-pc-tag{background:var(--surface); border:1px solid var(--line); color:var(--ink-2);
  padding:2px 8px; border-radius:99px; font-size:10.5px; font-weight:700; display:inline-flex; align-items:center; gap:4px}
.pk-pc-tag.money{background:#F0FDFA; border-color:#99F6E4; color:#0F766E}
.pk-pc-tag.date{background:#EEF2FF; border-color:#C7D2FE; color:#4338CA}

/* Hide old .pk-project card style (v25) - replaced by .pk-project-card */
.pk-project{display:none !important}

/* === v25.0 — Mobile-app style picker enhancements === */
/* Slide from right (native iOS/Android forward navigation) */
@keyframes pickerSlideRight{from{transform:translateX(100%); opacity:.85}to{transform:translateX(0); opacity:1}}
.picker-sheet-v25{animation:pickerSlideRight .22s cubic-bezier(.2,.8,.2,1)}

/* Search bar under header */
.pk-search{padding:9px 14px; background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:8px}
.pk-search .searchbox{flex:1; position:relative}
.pk-search input{width:100%; padding:9px 34px 9px 34px; border:1.5px solid var(--line); border-radius:20px;
  font-family:inherit; font-size:13px; background:var(--surface); outline:none}
.pk-search input:focus{border-color:var(--teal); background:var(--card)}
.pk-search .icon{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:13px; pointer-events:none}
.pk-search .clear{position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:var(--line-strong); color:#fff; border:0; width:20px; height:20px; border-radius:50%;
  font-size:11px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center}

/* Result count line */
.pk-count{padding:8px 14px; font-size:11px; color:var(--muted); font-weight:600;
  background:var(--surface); border-bottom:1px solid var(--surface); position:sticky; top:52px; z-index:1}

/* Sort chips (for person picker) */
.pk-sort{padding:9px 14px; background:var(--surface); display:flex; gap:6px; overflow-x:auto; position:sticky; top:52px; z-index:1; border-bottom:1px solid var(--surface)}
.pk-sort::-webkit-scrollbar{display:none}
.pk-sort-chip{background:var(--card); border:1.5px solid var(--line); color:var(--ink-2);
  padding:5px 11px; border-radius:14px; font-family:inherit; font-size:11.5px; font-weight:700;
  cursor:pointer; white-space:nowrap; flex-shrink:0}
.pk-sort-chip.on{background:var(--teal); border-color:var(--teal); color:#fff}

/* Empty state */
.pk-empty{padding:40px 20px; text-align:center; color:var(--muted)}
.pk-empty .icon{font-size:36px; margin-bottom:8px; opacity:.5}
.pk-empty .title{font-size:14px; font-weight:800; color:var(--ink-2); margin-bottom:4px}
.pk-empty .desc{font-size:11.5px}

/* Project picker card */
.pk-project{background:var(--card); border:1.5px solid var(--line); border-radius:12px;
  padding:12px 14px; margin-bottom:10px; cursor:pointer; display:block}
.pk-project:active{transform:scale(.99)}
.pk-project.on{border-color:var(--teal); background:var(--teal-bg); box-shadow:0 2px 8px rgba(43,168,162,.15)}
.pk-project-head{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.pk-project-code{font-family:'Inter',monospace; background:var(--teal); color:#fff; padding:2px 8px; border-radius:5px; font-size:10.5px; font-weight:800}
.pk-project-name{flex:1; font-size:13.5px; font-weight:800; color:var(--ink); line-height:1.3}
.pk-project-radio{width:20px; height:20px; border:2px solid var(--line-strong); border-radius:50%; flex-shrink:0}
.pk-project.on .pk-project-radio{border-color:var(--teal); background:var(--teal); position:relative}
.pk-project.on .pk-project-radio::after{content:''; position:absolute; inset:4px; background:#fff; border-radius:50%}
.pk-project-loc{font-size:11px; color:var(--muted); margin-bottom:8px; display:flex; align-items:center; gap:5px}
.pk-project-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.pk-project-stat{background:var(--surface); border-radius:7px; padding:6px 8px; text-align:center}
.pk-project-stat .n{font-size:14px; font-weight:800; color:var(--ink); font-family:'Inter',sans-serif; line-height:1}
.pk-project-stat .l{font-size:9.5px; color:var(--muted); font-weight:600; margin-top:3px}
.pk-project-bar{margin-top:8px; background:var(--surface); border-radius:99px; height:6px; overflow:hidden}
.pk-project-bar-fill{height:100%; background:linear-gradient(90deg,var(--teal),var(--teal-dark)); border-radius:99px}

/* WBS L1 collapsible */
.pk-wbs-l1{cursor:pointer; user-select:none; justify-content:space-between}
.pk-wbs-l1 .l1-caret{font-size:11px; color:#4338CA; transition:transform .18s ease; margin-left:auto}
.pk-wbs-l1.collapsed .l1-caret{transform:rotate(-90deg)}
.pk-wbs-l1-group.collapsed .pk-wbs-l2,
.pk-wbs-l1-group.collapsed .pk-wbs-l3{display:none}

/* Path breadcrumb for WBS */
.pk-breadcrumb{background:linear-gradient(135deg,var(--teal-bg),#E0F2F0); border:1.5px solid var(--teal-soft);
  border-radius:9px; padding:9px 12px; margin-bottom:10px; font-size:11.5px; color:var(--teal-dark); font-weight:700;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.pk-breadcrumb .sep{color:var(--teal); opacity:.5}
.pk-breadcrumb .bc-current{background:var(--teal); color:#fff; padding:2px 7px; border-radius:5px; font-size:10.5px}

/* Site expand/collapse */
.pk-site-head{cursor:pointer; user-select:none}
.pk-site-head .site-caret{margin-left:auto; font-size:11px; color:var(--teal-dark); transition:transform .18s ease}
.pk-site.collapsed .site-caret{transform:rotate(-90deg)}
.pk-site.collapsed .pk-zone-list{display:none}

/* === v24.0 — Full-screen Pickers (Site/Zone · WBS · Assignee) === */
.picker-overlay{position:fixed; inset:0; background:rgba(15,23,42,.55);
  display:flex; align-items:stretch; justify-content:stretch;
  z-index:400; animation:tmFade .18s ease}
.picker-sheet{background:var(--card); width:100%; height:100%;
  display:flex; flex-direction:column; animation:pickerSlide .22s ease}
@keyframes pickerSlide{from{transform:translateY(30px); opacity:.6}to{transform:translateY(0); opacity:1}}
.picker-head{padding:14px 16px; border-bottom:1px solid var(--line);
  background:var(--card); display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:2}
.picker-head .back{background:var(--surface); border:1.5px solid var(--line);
  color:var(--ink); font-size:18px; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer}
.picker-head .title{flex:1; font-size:15px; font-weight:800; color:var(--ink)}
.picker-head .title-sub{font-size:11.5px; color:var(--muted); font-weight:600; margin-top:2px}
.picker-body{flex:1; overflow-y:auto; padding:12px 14px 100px; background:var(--surface)}
.picker-search{padding:10px 14px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:64px; z-index:1}
.picker-search input{width:100%; padding:9px 12px; border:1.5px solid var(--line); border-radius:9px;
  font-family:inherit; font-size:13px; background:var(--card); outline:none}
.picker-search input:focus{border-color:var(--teal)}
.picker-foot{position:sticky; bottom:0; background:var(--card); border-top:1px solid var(--line);
  padding:11px 14px calc(env(safe-area-inset-bottom, 0) + 10px); display:flex; gap:8px}
.picker-foot .cancel{flex:0 0 96px; background:var(--card); color:var(--ink); border:1.5px solid var(--line-strong);
  padding:10px; border-radius:11px; font-family:inherit; font-size:13px; font-weight:800}
.picker-foot .confirm{flex:1; background:var(--teal); color:#fff;
  padding:10px; border-radius:11px; font-family:inherit; font-size:13px; font-weight:800;
  box-shadow:0 2px 6px rgba(43,168,162,.30)}
.picker-foot .confirm:disabled{opacity:.5; box-shadow:none}

/* Site/Zone hierarchy */
.pk-site{background:var(--card); border:1px solid var(--line); border-radius:11px; margin-bottom:10px; overflow:hidden}
.pk-site-head{padding:11px 14px; background:linear-gradient(135deg,var(--teal-bg),#E0F2F0);
  border-bottom:1px solid var(--teal-soft); display:flex; align-items:center; gap:8px}
.pk-site-head .code{font-family:'Inter',monospace; font-weight:800; background:var(--teal); color:#fff;
  padding:2px 8px; border-radius:5px; font-size:10.5px}
.pk-site-head .name{flex:1; font-size:13px; font-weight:800; color:var(--teal-dark)}
.pk-zone-list{padding:6px 0}
.pk-zone{padding:10px 14px 10px 30px; border-top:1px solid var(--surface); display:flex; align-items:center; gap:8px; cursor:pointer}
.pk-zone:first-child{border-top:0}
.pk-zone:active{background:var(--teal-bg)}
.pk-zone.on{background:var(--teal-bg); border-left:3px solid var(--teal); padding-left:27px}
.pk-zone .code{font-family:'Inter',monospace; font-weight:700; background:var(--surface); color:var(--ink-2);
  padding:2px 7px; border-radius:5px; font-size:10.5px}
.pk-zone .name{flex:1; font-size:12.5px; color:var(--ink); font-weight:600}
.pk-zone .radio{width:18px; height:18px; border:2px solid var(--line-strong); border-radius:50%; flex-shrink:0}
.pk-zone.on .radio{border-color:var(--teal); background:var(--teal); box-shadow:inset 0 0 0 3px #fff}

/* WBS hierarchy */
.pk-wbs-tree{background:var(--card); border:1px solid var(--line); border-radius:11px; overflow:hidden}
.pk-wbs-l1{padding:10px 14px; background:#EEF2FF; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:8px; font-weight:800; color:#4338CA; font-size:12.5px}
.pk-wbs-l1 .code{font-family:'Inter',monospace; background:#4338CA; color:#fff; padding:2px 8px; border-radius:5px; font-size:10.5px}
.pk-wbs-l2{padding:9px 14px 9px 30px; background:var(--teal-bg); border-bottom:1px solid var(--surface);
  display:flex; align-items:center; gap:8px; font-weight:700; color:var(--teal-dark); font-size:12px}
.pk-wbs-l2 .code{font-family:'Inter',monospace; background:var(--teal); color:#fff; padding:2px 7px; border-radius:5px; font-size:10px}
.pk-wbs-l3{padding:10px 14px 10px 46px; border-bottom:1px solid var(--surface); display:flex; align-items:center; gap:8px; cursor:pointer}
.pk-wbs-l3:hover{background:var(--surface)}
.pk-wbs-l3.on{background:var(--teal-bg); border-left:3px solid var(--teal); padding-left:43px}
.pk-wbs-l3 .code{font-family:'Inter',monospace; background:#FFF7E6; color:#8A5A00; padding:2px 7px; border-radius:5px; font-size:10.5px; font-weight:800}
.pk-wbs-l3 .name{flex:1; font-size:12.5px; color:var(--ink); font-weight:600}
.pk-wbs-l3 .radio{width:18px; height:18px; border:2px solid var(--line-strong); border-radius:50%; flex-shrink:0}
.pk-wbs-l3.on .radio{border-color:var(--teal); background:var(--teal); box-shadow:inset 0 0 0 3px #fff}
.pk-wbs-guard{background:#FFF7E6; border:1.5px solid #F5D688; border-radius:9px; padding:10px 12px; margin-bottom:10px;
  font-size:11.5px; color:#8A5A00; font-weight:600; display:flex; align-items:center; gap:6px}

/* Assignee picker */
.pk-person{background:var(--card); border:1.5px solid var(--line); border-radius:11px;
  padding:12px 14px; margin-bottom:9px; display:grid; grid-template-columns:44px 1fr auto; gap:11px; align-items:center; cursor:pointer}
.pk-person:active{transform:scale(.99)}
.pk-person.on{border-color:var(--teal); background:var(--teal-bg); box-shadow:0 2px 8px rgba(43,168,162,.15)}
.pk-avatar{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0}
.pk-person-info{min-width:0}
.pk-person-name{font-size:13.5px; font-weight:800; color:var(--ink); line-height:1.3; margin-bottom:2px}
.pk-person-meta{font-size:11px; color:var(--muted); font-weight:600; display:flex; gap:8px; flex-wrap:wrap}
.pk-workload{background:var(--surface); border:1px solid var(--line); border-radius:99px;
  padding:2px 9px; font-size:10.5px; font-weight:800; color:var(--ink-2); font-family:'Inter',sans-serif}
.pk-workload.busy{background:#FEE2E2; color:#991B1B; border-color:#FCA5A5}
.pk-workload.free{background:#DCFCE7; color:#166534; border-color:#86EFAC}
.pk-workload.med{background:#FEF3C7; color:#92400E; border-color:#FCD34D}
.pk-person .radio{width:22px; height:22px; border:2px solid var(--line-strong); border-radius:50%; flex-shrink:0; align-self:center}
.pk-person.on .radio{border-color:var(--teal); background:var(--teal); position:relative}
.pk-person.on .radio::after{content:''; position:absolute; inset:4px; background:#fff; border-radius:50%}

/* Trigger button style (used for site/wbs/inspector/approver fields) */
.form-trigger{width:100%; text-align:left; background:var(--card); border:1.5px solid var(--line);
  border-radius:10px; padding:10px 40px 10px 12px; font-family:inherit; font-size:13px; color:var(--ink);
  cursor:pointer; position:relative; min-height:42px; display:flex; align-items:center; gap:8px}
.form-trigger:active{transform:scale(.995)}
.form-trigger.picked{border-color:var(--teal); background:var(--teal-bg)}
.form-trigger .chev{position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:14px; font-weight:800}
.form-trigger .placeholder{color:var(--muted); font-style:italic}
.form-trigger .picked-code{font-family:'Inter',monospace; background:var(--teal); color:#fff; padding:2px 7px; border-radius:5px; font-size:10.5px; font-weight:800}
.form-trigger .picked-name{color:var(--ink); font-weight:600}
.form-trigger .picked-avatar{width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--teal-dark));
  color:#fff; font-weight:800; display:inline-flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0}

/* Task Code toggle */
.code-row{display:flex; gap:8px; align-items:stretch}
.code-row input{flex:1}
.code-toggle{display:inline-flex; border:1.5px solid var(--line); border-radius:10px; overflow:hidden; background:var(--card)}
.code-toggle button{background:transparent; border:0; padding:0 12px; font-family:inherit; font-size:11.5px; font-weight:800;
  color:var(--muted); cursor:pointer}
.code-toggle button.on{background:var(--teal); color:#fff}

/* === v13.0 — Checklist Step-by-step wizard === */
/* v21.0 — Section Tab strip (matches Checklist v16.0 Mobile Preview) */
.ckw-tabs{display:flex; gap:6px; padding:8px 12px 4px; background:var(--card);
  border-bottom:1px solid var(--line); overflow-x:auto;
  overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--teal) #E5E7EB;
}
.ckw-tabs::-webkit-scrollbar{height:6px; background:transparent}
.ckw-tabs::-webkit-scrollbar-track{background:#E5E7EB; border-radius:99px; margin:0 12px}
.ckw-tabs::-webkit-scrollbar-thumb{background:var(--teal); border-radius:99px; min-width:24px}
.ckw-tabs::-webkit-scrollbar-thumb:hover{background:var(--teal-dark)}
.ckw-tab{flex-shrink:0; background:var(--surface); border:1.5px solid var(--line);
  border-radius:10px; padding:6px 10px; font-family:inherit; font-size:11px;
  font-weight:700; color:var(--ink-2); cursor:pointer;
  display:flex; align-items:center; gap:6px; transition:all .15s; white-space:nowrap;
}
.ckw-tab:active{transform:scale(.97)}
.ckw-tab.on{background:var(--teal); color:#fff; border-color:var(--teal); box-shadow:0 2px 6px rgba(43,168,162,.25)}
.ckw-tab-n{background:rgba(0,0,0,.15); color:inherit; border-radius:4px;
  padding:1px 5px; font-size:9.5px; font-weight:800; min-width:16px; text-align:center;
  font-family:'Inter',sans-serif}
.ckw-tab.on .ckw-tab-n{background:rgba(255,255,255,.28)}
.ckw-tab-count{font-size:9.5px; font-weight:700; opacity:.85; margin-left:2px}
/* v23.0 — Rule chip 📏 + type-aware widgets (from Checklist v16.0) */
.ckw-rule{margin:0 0 12px; background:linear-gradient(180deg,#FFF7E6,#FFFCF2);
  border:1.5px solid #F5D688; border-radius:10px; padding:10px 12px;
  display:flex; flex-direction:column; gap:6px}
.ckw-rule-head{display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800;
  color:#8A5A00; text-transform:uppercase; letter-spacing:.04em}
.ckw-rule-body{font-size:13px; font-weight:700; color:#5C3D00; line-height:1.4}
.ckw-rule-meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px}
.ckw-rule-chip{display:inline-flex; align-items:center; gap:4px; font-size:10.5px;
  font-weight:700; padding:2px 8px; border-radius:99px}
.ckw-rule-chip.ncr{background:#FEE2E2; color:#991B1B}
.ckw-rule-chip.warn{background:#FEF3C7; color:#92400E}
.ckw-rule-chip.crit{background:#FEE2E2; color:#991B1B}
.ckw-rule-chip.high{background:#FFEDD5; color:#9A3412}
.ckw-rule-chip.med{background:#DBEAFE; color:#1E40AF}
/* Widget label */
.ckw-widget-label{font-size:11.5px; font-weight:800; color:var(--ink-2);
  text-transform:uppercase; letter-spacing:.04em; margin:10px 0 6px;
  display:flex; align-items:center; gap:5px}
/* Number widget */
.ckw-input-row{display:flex; align-items:center; gap:8px}
.ckw-input{width:100%; font-family:inherit; font-size:13px; padding:9px 11px;
  border:1.5px solid var(--line); border-radius:8px; background:var(--card);
  outline:none; transition:border-color .15s; color:var(--ink); box-sizing:border-box}
.ckw-input:focus{border-color:var(--teal); box-shadow:0 0 0 3px rgba(43,168,162,.12)}
textarea.ckw-input{min-height:60px; resize:vertical; font-family:inherit}
.ckw-unit-chip{flex-shrink:0; font-size:12px; font-weight:800; color:var(--teal-dark);
  background:var(--teal-bg); border:1px solid var(--teal-soft); border-radius:6px;
  padding:6px 10px; min-width:52px; text-align:center; white-space:nowrap}
/* Radio / Checkbox cards */
.ckw-choices{display:flex; flex-direction:column; gap:6px; margin-top:2px}
.ckw-choices label{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink);
  padding:9px 11px; border:1.5px solid var(--line); border-radius:9px; cursor:pointer;
  background:var(--card); transition:all .15s; font-weight:500}
.ckw-choices label:active{transform:scale(.98)}
.ckw-choices label.on{border-color:var(--teal); background:var(--teal-bg); color:var(--teal-dark); font-weight:800}
.ckw-choices input{accent-color:var(--teal); width:15px; height:15px}
/* Color widget */
.ckw-color-row{display:flex; align-items:center; gap:8px}
.ckw-color-chip{flex-shrink:0; width:36px; height:36px; border-radius:8px;
  border:2px solid var(--line); background:#2BA8A2; box-shadow:inset 0 1px 3px rgba(0,0,0,.2)}
/* Signature widget */
.ckw-sig{padding:36px 12px; border:2px dashed var(--line-strong); border-radius:10px;
  background:repeating-linear-gradient(45deg,#F8FAFC,#F8FAFC 8px,#F1F5F9 8px,#F1F5F9 12px);
  text-align:center; font-size:12px; color:var(--muted); font-weight:600; font-style:italic}
.ckw-sig.signed{background:var(--success-soft); color:var(--success-dark); border-color:var(--success);
  border-style:solid; font-style:normal; font-weight:800; padding:24px 12px}
.ckw-stepper-wrap{padding:10px 14px; background:var(--card); border-bottom:1px solid var(--line)}
.ckw-stepper-info{font-size:11.5px; font-weight:700; color:var(--ink-2); margin-bottom:6px; display:flex; justify-content:space-between; align-items:center}
.ckw-stepper-info b{font-family:'Inter',sans-serif; color:var(--teal-dark); font-size:13px}
.ckw-stepper{display:flex; gap:6px; align-items:center; overflow-x:auto; padding-bottom:2px; margin-bottom:8px}
.ckw-stepper::-webkit-scrollbar{display:none}
.ckw-dot{
  flex-shrink:0; width:30px; height:30px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-family:'Inter',sans-serif; font-size:11px; font-weight:800;
  background:var(--card); color:var(--muted); border:2px solid var(--line-strong);
  transition:all .15s;
}
.ckw-dot.done{background:var(--success); color:#fff; border-color:var(--success)}
.ckw-dot.done.fail{background:var(--error); border-color:var(--error)}
.ckw-dot.done.skip{background:#94A3B8; border-color:#94A3B8}
.ckw-dot.current{
  background:var(--teal); color:#fff; border-color:var(--teal);
  transform:scale(1.15); box-shadow:0 0 0 4px var(--teal-bg);
}
.ckw-dot:active{transform:scale(.95)}
.ckw-dot.current:active{transform:scale(1.05)}
/* v20.0 — Current + Done combined · keep green fill + teal ring */
.ckw-dot.current.done{background:var(--success); border-color:var(--success); color:#fff; box-shadow:0 0 0 4px rgba(43,168,162,.35); transform:scale(1.15)}
/* v20.0 — Yellow ✓ badge on top-right of passed dots · no circle bg */
.ckw-dot{position:relative}
.ckw-check-badge{position:absolute; top:-6px; right:-6px; width:16px; height:16px;
  color:#FBBF24; display:inline-flex; align-items:center; justify-content:center;
  pointer-events:none; background:transparent; border:0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.ckw-check-badge svg{width:16px; height:16px; stroke-width:4}
.ckw-prog-bar{height:5px; background:var(--line); border-radius:999px; overflow:hidden}
.ckw-prog-bar i{display:block; height:100%; background:linear-gradient(90deg, var(--teal), var(--teal-light)); border-radius:999px; transition:width .3s}

.ckw-section-banner{
  padding:9px 14px; background:linear-gradient(135deg,var(--surface),#F1F5F9);
  border-bottom:1px solid var(--line); font-size:12px; font-weight:800; color:var(--ink-2);
  display:flex; align-items:center; gap:7px;
}
.ckw-section-num{
  width:22px; height:22px; border-radius:50%; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Inter',sans-serif; font-weight:800; font-size:11px;
}

.ckw-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:16px; margin:14px; box-shadow:var(--shadow-card);
}
.ckw-card .item-no{
  font-family:'Inter',sans-serif; font-size:10.5px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.6px; margin-bottom:4px;
}
.ckw-card .ck-top{display:flex; align-items:center; gap:6px; margin-bottom:10px; flex-wrap:wrap}
.ckw-card .ck-top .code{font-family:'Inter',monospace; font-size:11.5px; font-weight:800; background:#F1F5F9; padding:3px 9px; border-radius:6px; color:var(--ink)}
.ckw-card .ck-top .sev{padding:2px 9px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.3px}
.ckw-card .ck-top .sev.crit{background:var(--crit); color:#fff}
.ckw-card .ck-top .sev.high{background:var(--gold); color:#7C2D12}
.ckw-card .ck-top .sev.med{background:var(--sev-soft, var(--sky-soft)); color:var(--sky-dark)}
.ckw-card .ck-top .req{margin-left:auto; font-size:10.5px; color:var(--error); font-weight:800}
.ckw-card .ck-q{font-size:15px; font-weight:800; color:var(--ink); line-height:1.5; margin-bottom:8px}
.ckw-card .ck-help{font-size:12px; color:var(--muted); margin-bottom:14px; line-height:1.6; font-weight:500; padding:8px 10px; background:var(--surface); border-left:3px solid var(--teal); border-radius:0 8px 8px 0}

.ckw-nav{
  position:absolute; left:0; right:0; bottom:0; z-index:50;
  background:var(--card); border-top:1px solid var(--line);
  padding:11px 14px 22px; display:flex; gap:8px;
  box-shadow:0 -4px 12px rgba(15,23,42,.08);
}
.ckw-nav button{
  flex:1; padding:0 14px; height:var(--button-h); border-radius:11px;
  font-family:inherit; font-size:14px; font-weight:800;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:transform .12s;
}
.ckw-nav button:active{transform:scale(.98)}
.ckw-nav .btn-prev{
  background:var(--card); color:var(--ink); border:1.5px solid var(--line-strong);
  flex:0 0 auto; min-width:96px;
}
.ckw-nav .btn-prev:disabled{opacity:.4; cursor:not-allowed}
.ckw-nav .btn-next{background:var(--teal); color:#fff; box-shadow:0 2px 6px rgba(43,168,162,.30)}
.ckw-nav .btn-submit{background:var(--success); color:#fff; box-shadow:0 2px 6px rgba(39,174,96,.30)}

/* === v15.0 — Wizard completion screen === */
.ckw-done-card{
  background:linear-gradient(135deg, #F0FDF4, #D1FAE5);
  border:1px solid #BBF7D0; border-radius:14px;
  margin:14px; padding:24px 18px; text-align:center;
  box-shadow:0 8px 24px rgba(39,174,96,.18);
}
.ckw-done-card .ico{font-size:54px; margin-bottom:8px}
.ckw-done-card .title{font-size:17px; font-weight:800; color:var(--success-dark); margin-bottom:6px; line-height:1.4}
.ckw-done-card .desc{font-size:12.5px; color:var(--ink-2); margin-bottom:14px; line-height:1.6; font-weight:500}
.ckw-done-card .meta-list{
  text-align:left; background:rgba(255,255,255,.7); border-radius:10px;
  padding:10px 14px; margin:0 0 6px;
  font-size:12px; color:var(--ink-2); line-height:1.7; font-weight:600;
}
.ckw-done-card .meta-list .row{display:flex; justify-content:space-between; align-items:center}
.ckw-done-card .meta-list .row b{color:var(--success-dark); font-family:'Inter',sans-serif}

/* === v35.0 — QCM Approve Summary Screen === */
.qcr-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:12px 12px 6px}
.qcr-stat{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 6px; text-align:center; box-shadow:0 1px 2px rgba(15,23,42,.04)}
.qcr-stat-n{font-family:'Inter',sans-serif; font-size:22px; font-weight:800; line-height:1}
.qcr-stat-l{font-size:10px; font-weight:700; color:var(--muted); margin-top:4px; letter-spacing:.02em}
.qcr-stat-pass{border-color:#86EFAC; background:#F0FDF4}
.qcr-stat-pass .qcr-stat-n{color:var(--success-dark,#065F46)}
.qcr-stat-fail{border-color:#FCA5A5; background:#FEF2F2}
.qcr-stat-fail .qcr-stat-n{color:#B91C1C}
.qcr-stat-warn{border-color:#FCD34D; background:#FFFBEB}
.qcr-stat-warn .qcr-stat-n{color:#B45309}
.qcr-stat-pending{border-color:#CBD5E1; background:#F8FAFC}
.qcr-stat-pending .qcr-stat-n{color:var(--muted)}

.qcr-alert-bar{margin:6px 12px 4px; padding:10px 12px; background:#FEE2E2; border:1.5px solid #FCA5A5; border-radius:10px; display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:#991B1B}
.qcr-ok-bar{margin:6px 12px 4px; padding:10px 12px; background:#DCFCE7; border:1.5px solid #86EFAC; border-radius:10px; display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:#065F46}
.qcr-alert-ico{font-size:16px; line-height:1}
.qcr-alert-txt{line-height:1.4}

.qcr-body{padding:8px 12px 100px}
.qcr-sec{background:var(--card); border:1px solid var(--line); border-radius:12px; margin-bottom:10px; overflow:hidden}
.qcr-sec-h{display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--surface,#F8FAFC); border-bottom:1px solid var(--line)}
.qcr-sec-code{background:var(--brand,#2BA8A2); color:#fff; font-family:'Inter',sans-serif; font-weight:800; font-size:12px; padding:3px 9px; border-radius:6px; letter-spacing:.02em}
.qcr-sec-name{flex:1; font-size:13px; font-weight:800; color:var(--ink)}
.qcr-sec-cnt{font-size:10.5px; font-weight:700; color:var(--muted); background:var(--card); padding:2px 8px; border-radius:99px; border:1px solid var(--line)}
.qcr-sec-ncr .qcr-sec-h{background:#FEF2F2; border-bottom-color:#FCA5A5}

.qcr-row{display:flex; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); align-items:flex-start}
.qcr-row:last-child{border-bottom:0}
.qcr-rl{flex:1; min-width:0}
.qcr-code{font-family:'Inter',sans-serif; font-size:10px; font-weight:800; color:var(--muted); letter-spacing:.03em; margin-bottom:2px}
.qcr-title{font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.4}
.qcr-cmt{font-size:11px; color:var(--ink-2,#475569); margin-top:4px; padding:4px 8px; background:var(--surface,#F8FAFC); border-radius:6px; line-height:1.4}
.qcr-vbadge{flex-shrink:0; display:inline-flex; align-items:center; gap:3px; padding:4px 9px; border-radius:99px; font-size:10.5px; font-weight:800; letter-spacing:.02em; height:fit-content}
.qcr-vp{background:#DCFCE7; color:#065F46; border:1px solid #86EFAC}
.qcr-vf{background:#FEE2E2; color:#991B1B; border:1px solid #FCA5A5}
.qcr-vw{background:#FEF3C7; color:#B45309; border:1px solid #FCD34D}
.qcr-vn{background:#F1F5F9; color:var(--muted); border:1px solid #CBD5E1}

.qcr-ncr-row{display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line)}
.qcr-ncr-row:last-child{border-bottom:0}
.qcr-ncr-id{font-family:'Inter',sans-serif; font-size:11.5px; font-weight:800; color:#B91C1C}
.qcr-ncr-t{flex:1; font-size:12.5px; color:var(--ink)}
.qcr-ncr-st{font-family:'Inter',sans-serif; font-size:10px; font-weight:800; color:#B91C1C; background:#FEE2E2; padding:3px 8px; border-radius:6px; letter-spacing:.03em}

.qcr-note{margin-top:12px}
.qcr-note-l{display:block; font-size:12px; font-weight:700; color:var(--ink); margin-bottom:6px}
.qcr-note-i{width:100%; min-height:70px; padding:10px 12px; border:1.5px solid var(--line-strong,#CBD5E1); border-radius:10px; font-family:inherit; font-size:13px; color:var(--ink); resize:vertical; box-sizing:border-box; background:var(--card)}
.qcr-note-i:focus{outline:none; border-color:var(--brand,#2BA8A2)}

.btn-primary{background:linear-gradient(180deg,var(--brand,#2BA8A2),var(--brand-dark,#167571)); color:#fff; border:none}
.btn-primary:active{transform:translateY(1px)}

/* Alert / Confirm modal for QCM approve */
.qcm-modal-overlay{position:absolute; inset:0; z-index:250; background:rgba(15,23,42,.6); display:flex; align-items:center; justify-content:center; padding:18px; animation:ncrConfirmIn .18s ease}
.qcm-modal{width:100%; max-width:340px; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 12px 32px rgba(15,23,42,.3); animation:ncrConfirmCard .22s cubic-bezier(.2,.9,.3,1.2)}
.qcm-modal-ico{width:64px; height:64px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:800; margin:20px auto 0}
.qcm-modal-ico-red{background:linear-gradient(135deg,#EF4444,#B91C1C); box-shadow:0 6px 18px rgba(239,68,68,.35)}
.qcm-modal-ico-green{background:linear-gradient(135deg,#10B981,#065F46); box-shadow:0 6px 18px rgba(16,185,129,.35)}
.qcm-modal-title{text-align:center; font-size:17px; font-weight:800; color:var(--ink); margin:14px 18px 6px}
.qcm-modal-desc{text-align:center; font-size:12.5px; line-height:1.55; color:var(--ink-2,#475569); margin:0 22px 12px}
.qcm-modal-list{margin:8px 22px 12px; padding:10px 12px; background:#FEE2E2; border:1px solid #FCA5A5; border-radius:10px}
.qcm-modal-li{font-size:12px; color:#991B1B; font-weight:700; padding:2px 0}
.qcm-modal-summary{margin:8px 22px 14px; padding:10px 12px; background:#F0FDF4; border:1px solid #86EFAC; border-radius:10px; font-size:12px; color:#065F46; line-height:1.7}
.qcm-modal-summary b{color:#064E3B; font-weight:800; margin-right:4px}
.qcm-modal-bar{display:flex; gap:8px; padding:12px 18px 18px}
.qcm-modal-btn{flex:1; height:44px; border-radius:11px; font-family:inherit; font-size:14px; font-weight:800; border:none; cursor:pointer}
.qcm-modal-btn-primary{background:linear-gradient(180deg,#EF4444,#B91C1C); color:#fff}
.qcm-modal-btn-ghost{background:var(--card); color:var(--ink); border:1.5px solid var(--line-strong,#CBD5E1)}
.qcm-modal-btn-success{background:linear-gradient(180deg,#10B981,#065F46); color:#fff}
.qcm-modal-btn:active{transform:translateY(1px)}

</style>
</head>
<body>

<div class="page">
  <div class="phone">
    <div class="status-bar">
      <span>9:41</span>
      <span class="status-icons">
        <span>📶</span><span>📡</span>
        <span class="battery"><i></i></span>
      </span>
    </div>

    <main class="app-scroll" id="appScroll"></main>

    <!-- FAB -->
    <button class="fab" id="fab"><span id="fabIco">＋</span></button>

    <!-- Bottom nav -->
    <nav class="tab-bar" id="tabBar"></nav>
  </div>

  <div class="toast" id="toast"></div>
</div>

<script>
/* ============================================================
   DATA
   ============================================================ */
const TASKS = [
  {code:"TQ-2026-054",nameTh:"ตรวจงานสี ชั้น 5 โซน A",nameEn:"Paint · F5 Zone A",state:"in_progress",priority:"high",dueIn:4,items:12,itemsDone:8,ncrCount:1,checklist:"ตรวจงานสี v1.0",wbsTh:"งานสี / Painting",wbsEn:"Painting",zoneTh:"ชั้น 5",zoneEn:"Floor 5",inspector:"คิตติศักดิ์ ช.",owner:"ผรช.สมชาย",workflowTh:"มาตรฐาน QC (7 ขั้น)",workflowEn:"Standard QC (7 steps)",ncrs:["NCR-2026-0054"]},
  {code:"TQ-2026-055",nameTh:"ตรวจคอนกรีต Lobby",nameEn:"Concrete · Lobby",state:"assigned",priority:"medium",dueIn:8,items:8,itemsDone:0,ncrCount:0,checklist:"ตรวจคอนกรีต v1.1",wbsTh:"งานคอนกรีต",wbsEn:"Concrete",zoneTh:"ชั้น G",zoneEn:"Ground",inspector:"อภินยา ว.",owner:"ผรช.วิรัตน์",workflowTh:"แบบเรียบง่าย (3 ขั้น)",workflowEn:"Simple (3 steps)",ncrs:[]},
  {code:"TQ-2026-056",nameTh:"ตรวจระบบไฟฟ้า ดาดฟ้า",nameEn:"Electrical · Rooftop",state:"ncr_open",priority:"high",dueIn:12,items:8,itemsDone:8,ncrCount:2,checklist:"ตรวจระบบไฟฟ้า v1.0",wbsTh:"งานระบบไฟฟ้า",wbsEn:"Electrical",zoneTh:"ดาดฟ้า",zoneEn:"Rooftop",inspector:"คิตติศักดิ์ ช.",owner:"ผรช.อนุชา",workflowTh:"มาตรฐาน QC (7 ขั้น)",workflowEn:"Standard QC (7 steps)",ncrs:["NCR-2026-0057","NCR-2026-0058"]},
  {code:"TQ-2026-050",nameTh:"ตรวจงานเสาเข็ม ใต้ดิน 2",nameEn:"Piling · Basement 2",state:"ncr_verify",priority:"high",dueIn:-5,items:7,itemsDone:7,ncrCount:2,checklist:"ตรวจเสาเข็ม v2.0",wbsTh:"งานเสาเข็ม / Piling",wbsEn:"Piling",zoneTh:"ใต้ดิน 2",zoneEn:"Basement 2",inspector:"ณรงค์ บ.",owner:"ผรช.สมชาย",workflowTh:"มาตรฐาน QC (7 ขั้น)",workflowEn:"Standard QC (7 steps)",ncrs:["NCR-2026-0055","NCR-2026-0056"]},
  {code:"TQ-2026-049",nameTh:"ตรวจคอนกรีต ชั้น 2",nameEn:"Concrete · F2",state:"done",priority:"medium",dueIn:-12,items:12,itemsDone:12,ncrCount:1,checklist:"ตรวจคอนกรีต v1.1",wbsTh:"งานคอนกรีต",wbsEn:"Concrete",zoneTh:"ชั้น 2",zoneEn:"Floor 2",inspector:"คิตติศักดิ์ ช.",owner:"ผรช.สมชาย",workflowTh:"มาตรฐาน QC (7 ขั้น)",workflowEn:"Standard QC (7 steps)",ncrs:["NCR-2026-0053"]},
  {code:"TQ-2026-057",nameTh:"ตรวจเสาเข็มเจาะ B3",nameEn:"Bored Pile · B3",state:"review",priority:"high",dueIn:2,items:9,itemsDone:9,ncrCount:0,checklist:"ตรวจเสาเข็ม v2.0",wbsTh:"งานเสาเข็ม",wbsEn:"Piling",zoneTh:"ใต้ดิน 3",zoneEn:"Basement 3",inspector:"ณรงค์ บ.",owner:"ผรช.วิรัตน์",workflowTh:"มาตรฐาน QC (7 ขั้น)",workflowEn:"Standard QC (7 steps)",ncrs:[]},
];

const NCRS = {
  "NCR-2026-0054": {id:"NCR-2026-0054", sev:"high", status:"open", taskCode:"TQ-2026-054", item:"F-A03", titleTh:"พบรอยลูกกลิ้งที่ผนัง W-A02", titleEn:"Roller marks at wall W-A02", descTh:"ตรวจพบรอยลูกกลิ้งบริเวณผนัง W-A02 ขนาด 30×40 ซม. ที่ความสูง 1.5 ม. · ไม่ผ่านเกณฑ์การตรวจสายตา", descEn:"Roller marks on W-A02 area 30×40 cm at 1.5m · fails visual inspection.", sizeTh:"30 × 40 ซม.", sizeEn:"30 × 40 cm", locTh:"ผนัง W-A02 · 1.5 ม.", locEn:"Wall W-A02 · 1.5m", std:"มยผ. 1316-50 §5.2", inspector:"คิตติศักดิ์ ช.", owner:"ผรช.สมชาย", due:"17 มิ.ย. 17:00", rootCauseTh:"ลูกกลิ้งสีสึกหรอจากใช้งานต่อเนื่อง 3 วัน ไม่ได้เปลี่ยน", rootCauseEn:"Paint roller worn from 3 days continuous use, not replaced.", correctTh:"1. ขัดผิวด้วยกระดาษทรายเบอร์ 240\n2. ทำความสะอาดผิว\n3. ทาสีรองพื้น 1 ชั้น\n4. ทาสีทับ 2 ชั้น (ใช้ลูกกลิ้งใหม่)\n5. ตรวจซ้ำ", correctEn:"1. Sand with #240\n2. Clean surface\n3. Primer 1 coat\n4. Repaint 2 coats (new roller)\n5. Re-inspect", before:3, after:0, stopWork:false, sla:"≤ 3 วัน"},
  "NCR-2026-0055": {id:"NCR-2026-0055", sev:"crit", status:"open", taskCode:"TQ-2026-050", item:"P-A03", titleTh:"Pile Load Test P-12 ไม่ผ่าน · Settlement เกินกำหนด", titleEn:"Pile Load Test P-12 failed · Settlement exceeds limit", descTh:"Static Pile Load Test ที่ P-12 พบ Settlement 38 มม. ที่ 1.5× WL (เกิน 25 มม.)", descEn:"Static PLT on P-12: 38mm settlement at 1.5× WL (exceeds 25mm).", sizeTh:"Settlement 38 มม.", sizeEn:"38mm", locTh:"P-12 · ใต้ดิน 2", locEn:"P-12 · Basement 2", std:"มยผ. 1501-51 §5.1", inspector:"ณรงค์ บ.", owner:"อภินยา ว. (วิศวกร)", due:"2 มิ.ย. 17:00", rootCauseTh:"ชั้นดินใต้ P-12 มี soft clay เฉพาะจุด หรือเสาเข็มไม่ถึงชั้น bearing soil", rootCauseEn:"Localized soft clay or pile didn't reach bearing layer.", correctTh:"1. หยุดก่อสร้างเหนือ P-12\n2. Coring Test + Sub-soil investigation\n3. ปรึกษาวิศวกร: ตอกเสาเข็มเสริม หรือ enlarge pile cap\n4. Re-do Pile Load Test\n5. Update Shop Drawing", correctEn:"1. Stop construction above P-12\n2. Coring Test + sub-soil\n3. Reinforcement pile or pile cap\n4. Re-do PLT\n5. Update shop drawing", before:3, after:0, stopWork:true, sla:"≤ 24 ชม."},
  "NCR-2026-0056": {id:"NCR-2026-0056", sev:"high", status:"verify", taskCode:"TQ-2026-050", item:"P-B02", titleTh:"พบโพรง (Void) ใน P-08 · ระดับ -6.5 ม.", titleEn:"Void in pile P-08 at -6.5m", descTh:"PIT Test ที่ P-08 ตรวจพบ defect echo ที่ระดับ -6.5 ม. · คาดเป็นโพรง ~80×60 มม.", descEn:"PIT Test on P-08: defect at -6.5m · suspected void ~80×60mm.", sizeTh:"~80 × 60 มม. ลึก -6.5 ม.", sizeEn:"~80 × 60mm depth -6.5m", locTh:"P-08 · ใต้ดิน 2", locEn:"P-08 · Basement 2", std:"มยผ. 1501-51 §5.4", inspector:"ณรงค์ บ.", owner:"ผรช.สมชาย", due:"4 มิ.ย. 17:00", rootCauseTh:"การ Vibrate คอนกรีตไม่ทั่วถึงตอนเทเสาเข็ม P-08", rootCauseEn:"Insufficient vibration during pour of P-08.", correctTh:"1. Coring Test ที่ระดับ -6.5 ม. ของ P-08\n2. ถ้าพบโพรง: Grout Injection (TAM)\n3. ฉีด Non-shrink grout (≤ 5 bar)\n4. PIT Test ซ้ำ 7 วัน\n5. ถ้าไม่สำเร็จ → Reinforcement pile", correctEn:"1. Coring Test at -6.5m\n2. If void: Grout Injection (TAM)\n3. Non-shrink grout (≤ 5 bar)\n4. Re-PIT after 7 days\n5. If fail → reinforcement pile", before:2, after:2, stopWork:false, sla:"≤ 3 วัน"},
  "NCR-2026-0057": {id:"NCR-2026-0057", sev:"crit", status:"open", taskCode:"TQ-2026-056", item:"M-A03", titleTh:"Breaker CB-09 ขนาด 32A เกินค่าที่คำนวณ (ควร 20A)", titleEn:"Breaker CB-09 32A exceeds calc (need 20A)", descTh:"AC ห้องเครื่อง MDB-2 ใช้ Breaker 32A กับสาย THW 4mm² · เสี่ยงไฟไหม้", descEn:"AC at MDB-2 uses 32A breaker with THW 4mm² · fire hazard.", sizeTh:"32A vs 20A", sizeEn:"32A vs 20A", locTh:"MDB-2 ดาดฟ้า · CB-09", locEn:"MDB-2 Rooftop · CB-09", std:"วสท. 3001-56 §5.2", inspector:"คิตติศักดิ์ ช.", owner:"ผรช.อนุชา", due:"พรุ่งนี้ 13:00", rootCauseTh:"ผู้รับเหมานำ Breaker stock จากโครงการอื่นมาใช้ ไม่ได้เช็ค Shop Drawing", rootCauseEn:"Used breaker from another project without checking drawings.", correctTh:"1. ปิด CB-09 + ตัดไฟวงจร\n2. ถอด Breaker 32A · เช็คสาย\n3. ติดตั้ง 20A ใหม่ (Schneider C60N)\n4. ทดสอบ trip curve\n5. Update Single Line Diagram\n6. Audit Breaker อื่นๆ ใน MDB-2", correctEn:"1. Power off + de-energize\n2. Remove 32A · check wire\n3. Install 20A (Schneider C60N)\n4. Test trip curve\n5. Update Single Line Diagram\n6. Audit all MDB-2 breakers", before:3, after:0, stopWork:true, sla:"≤ 24 ชม."},
  "NCR-2026-0058": {id:"NCR-2026-0058", sev:"crit", status:"open", taskCode:"TQ-2026-056", item:"M-A04", titleTh:"Grounding 8.2 Ω · เกิน 5 Ω", titleEn:"Grounding 8.2 Ω · exceeds 5 Ω", descTh:"Earth Tester วัดได้ 8.2 Ω ที่ Main Ground · เกิน 5 Ω · ดินแห้ง + Ground Rod ตื้นไป (2.4 ม.)", descEn:"Earth Tester: 8.2 Ω at Main Ground · exceeds 5 Ω · dry soil + rod too shallow (2.4m).", sizeTh:"8.2 Ω", sizeEn:"8.2 Ω", locTh:"Main Ground ดาดฟ้า", locEn:"Main Ground Rooftop", std:"วสท. 3001-56 §6.1", inspector:"คิตติศักดิ์ ช.", owner:"ผรช.อนุชา", due:"21 มิ.ย. 17:00", rootCauseTh:"ดินดาดฟ้าตื้น/แห้ง · Ground Rod 2.4 ม. (น้อยกว่า 3 ม.) · ไม่เติม Salt/Charcoal", rootCauseEn:"Shallow/dry rooftop soil · rod 2.4m (< 3m) · no salt/charcoal.", correctTh:"1. เพิ่ม Ground Rod ⌀16 mm × 3 ม.\n2. ต่อ Main Ground ด้วย Exothermic Welding\n3. เติม Salt 1 กก. + Charcoal 2 กก.\n4. เติมน้ำ 20 ลิตร · บ่ม 24 ชม.\n5. วัดซ้ำ ต้อง ≤ 5 Ω\n6. ถ้าไม่ผ่าน → Multi-rod system", correctEn:"1. Add Ground Rod ⌀16mm × 3m\n2. Connect via Exothermic Welding\n3. Add 1kg Salt + 2kg Charcoal\n4. 20L water · 24h cure\n5. Re-test ≤ 5 Ω\n6. If fail → Multi-rod", before:2, after:0, stopWork:true, sla:"≤ 24 ชม."},
};

// v8.0 — Sub-contractor roster with bookings (busy days)
const SUB_CONTRACTORS = [
  {
    id:'somchai', initials:'สม',
    nameTh:'ผรช.สมชาย จันทร์เพ็ญ', nameEn:'Foreman Somchai Janpen',
    roleTh:'Foreman · ก่อสร้างทั่วไป', roleEn:'Foreman · General Construction',
    activeTasks:2,
    // busy days (relative offset from 2026-06-21)
    busyOffsets: [0, 1, 2, 5, 6, 9, 12]
  },
  {
    id:'anucha', initials:'อน',
    nameTh:'ผรช.อนุชา ไฟฟ้า', nameEn:'Foreman Anucha (Electrical)',
    roleTh:'Foreman · ระบบไฟฟ้า', roleEn:'Foreman · Electrical',
    activeTasks:4,
    busyOffsets: [0, 1, 2, 3, 6, 7, 8, 10, 13]
  },
  {
    id:'apinya', initials:'อภ',
    nameTh:'อภินยา วงศ์สุข', nameEn:'Apinya Wongsuk',
    roleTh:'วิศวกรโครงสร้าง', roleEn:'Structural Engineer',
    activeTasks:3,
    busyOffsets: [3, 4, 5, 6, 7, 11]
  },
];

// Compute next-free date for a sub-contractor (offset 0 = today = 2026-06-21)
function nextFreeOffset(sub){
  for(let i=0; i<14; i++){
    const d = new Date(2026, 5, 21 + i);
    const dow = d.getDay();
    if(dow === 0 || dow === 6) continue;  // skip weekends for "free" count
    if(!sub.busyOffsets.includes(i)) return i;
  }
  return null;
}
function offsetToDateStr(offset){
  if(offset === null) return '—';
  const d = new Date(2026, 5, 21 + offset);
  const months = ['ม.ค.','ก.พ.','มี.ค.','เม.ย.','พ.ค.','มิ.ย.','ก.ค.','ส.ค.','ก.ย.','ต.ค.','พ.ย.','ธ.ค.'];
  return d.getDate() + ' ' + months[d.getMonth()];
}
function offsetToDateEnStr(offset){
  if(offset === null) return '—';
  const d = new Date(2026, 5, 21 + offset);
  const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  return months[d.getMonth()] + ' ' + d.getDate();
}

const ROLE_META = {
  pm:        { th:'PM · Project Manager', en:'Project Manager' },
  qcm:       { th:'QC Manager',           en:'QC Manager' },
  inspector: { th:'QC Inspector',         en:'QC Inspector' },
  engineer:  { th:'Field / Sub',          en:'Field/Sub' },
};

const FAB_BY_ROLE = {
  pm:        { ico:'＋', th:'มอบหมายงาน',   en:'Assign Task',  goto:null },
  qcm:       { ico:'＋', th:'สร้าง Task',    en:'Create Task',  goto:'create' },
  inspector: { ico:'📸', th:'ตรวจคุณภาพ',  en:'Inspect Now',  goto:null },
  engineer:  { ico:'📝', th:'ส่งผลแก้ไข',  en:'Submit Report',goto:null },
};

const TABS_BY_ROLE = {
  pm:        [['🏠','หน้าหลัก','Home'],['✅','งาน','Tasks',true],['⚠️','NCR','NCR','',3],['📊','รายงาน','Reports'],['👤','ฉัน','Me']],
  qcm:       [['🏠','หน้าหลัก','Home'],['✅','งาน','Tasks',true,7],['⚠️','NCR','NCR','',3],['📊','รายงาน','Reports'],['👤','ฉัน','Me']],
  inspector: [['🏠','หน้าหลัก','Home'],['📋','งานวันนี้','Today',true,4],['⚠️','NCR','NCR'],['📊','รายงาน','Reports'],['👤','ฉัน','Me']],
  engineer:  [['🏠','หน้าหลัก','Home'],['📋','งานของฉัน','My Work',true,5],['⚠️','NCR','NCR','',2],['📊','รายงาน','Reports'],['👤','ฉัน','Me']],
};

const STATE_LABEL = {
  draft:        ['📝 ร่าง','📝 Draft'],
  assigned:     ['👤 มอบหมายแล้ว','👤 Assigned'],
  in_progress:  ['⚙️ กำลังตรวจ','⚙️ In Progress'],
  review:       ['👁 รออนุมัติ','👁 Review'],
  ncr_open:     ['⚠ มี NCR ค้าง','⚠ NCR Open'],
  ncr_verify:   ['🔁 รอตรวจซ้ำ','🔁 NCR Verify'],
  done:         ['✓ เสร็จแล้ว','✓ Done'],
};
const PRIO_LABEL = { low:['ต่ำ','Low'], medium:['กลาง','Medium'], high:['สูง','High'], urgent:['ด่วน','Urgent'] };
const SEV_LABEL = { crit:['วิกฤต','Critical'], high:['สูง','High'], med:['กลาง','Medium'], low:['ต่ำ','Low'] };
const NCR_STATUS_LABEL = { open:['NCR เปิด','NCR Open'], verify:['รอตรวจซ้ำ','NCR Verify'], closed:['ปิดแล้ว','Closed'] };

/* v26.0 — Project sample data (extended with status/color/contract/target/recency) */
const CT_PROJECTS = [
  { id:'tarnas-tower', code:'PRJ-24-001',
    name_th:'Tarnas Tower · อาคารสำนักงาน 30 ชั้น', name_en:'Tarnas Tower · 30-Floor Office',
    location_th:'ถนนพระราม 9 · เขตห้วยขวาง กทม.', location_en:'Rama 9 Rd · Huai Khwang, Bangkok',
    progress:64, sites:3, activeTasks:47, budget:'820M ฿',
    status:'active', color:'#2BA8A2', contractValue:'820M', targetDate:'ธ.ค. 2569', targetDateEn:'Dec 2026',
    startedMonthsAgo:18, thumbInitials:'TT', category:'office' },
  { id:'silom-heights', code:'PRJ-24-002',
    name_th:'Silom Heights Condominium', name_en:'Silom Heights Condominium',
    location_th:'ถนนสีลม · เขตบางรัก กทม.', location_en:'Silom Rd · Bang Rak, Bangkok',
    progress:38, sites:2, activeTasks:29, budget:'560M ฿',
    status:'active', color:'#7C3AED', contractValue:'560M', targetDate:'มี.ค. 2570', targetDateEn:'Mar 2027',
    startedMonthsAgo:8, thumbInitials:'SH', category:'condo' },
  { id:'sathorn-plaza', code:'PRJ-24-003',
    name_th:'Sathorn Plaza · Mixed-use Development', name_en:'Sathorn Plaza · Mixed-use',
    location_th:'ถนนสาทรใต้ · เขตสาทร กทม.', location_en:'South Sathorn Rd · Sathorn, Bangkok',
    progress:12, sites:4, activeTasks:15, budget:'1.2B ฿',
    status:'starting', color:'#F59E0B', contractValue:'1.2B', targetDate:'ก.ย. 2571', targetDateEn:'Sep 2028',
    startedMonthsAgo:2, thumbInitials:'SP', category:'mixed' },
  { id:'nakhon-mall', code:'PRJ-24-004',
    name_th:'Nakhon Ratchasima Mall · ห้างค้าปลีกขนาดกลาง', name_en:'Nakhon Ratchasima Mall',
    location_th:'ถนนมิตรภาพ · จ.นครราชสีมา', location_en:'Mittraphap Rd · Nakhon Ratchasima',
    progress:85, sites:1, activeTasks:8, budget:'340M ฿',
    status:'near', color:'#DC2626', contractValue:'340M', targetDate:'ก.ย. 2569', targetDateEn:'Sep 2026',
    startedMonthsAgo:24, thumbInitials:'NM', category:'retail' }
];

function projectCategoryLabel(cat){
  if(cat === 'office')  return { th:'อาคารสำนักงาน', en:'Office building', icon:'🏢' };
  if(cat === 'condo')   return { th:'คอนโดมิเนียม',   en:'Condominium',    icon:'🏠' };
  if(cat === 'mixed')   return { th:'Mixed-use',       en:'Mixed-use',      icon:'🏙️' };
  if(cat === 'retail')  return { th:'ห้างค้าปลีก',      en:'Retail',        icon:'🛍️' };
  return { th:'อาคาร', en:'Building', icon:'🏗️' };
}

function projectStatusLabel(status){
  if(status === 'active')   return { th:'กำลังดำเนินการ', en:'Active',        color:'#0F766E', bg:'#CCFBF1' };
  if(status === 'near')     return { th:'ใกล้เสร็จ',       en:'Near completion',color:'#991B1B', bg:'#FEE2E2' };
  if(status === 'starting') return { th:'เพิ่งเริ่ม',       en:'Just started',   color:'#8A5A00', bg:'#FEF3C7' };
  return { th:'ทั้งหมด', en:'All', color:'#334155', bg:'#F1F5F9' };
}

/* v26.0 — SVG circular progress ring · size in px · pct 0-100 */
function progressRingSvg(pct, size, color){
  const s = size || 48;
  const stroke = Math.max(4, Math.round(s * 0.09));
  const r = (s - stroke) / 2;
  const c = 2 * Math.PI * r;
  const off = c - (pct/100) * c;
  return `<svg width="${s}" height="${s}" viewBox="0 0 ${s} ${s}" style="transform:rotate(-90deg)">
    <circle cx="${s/2}" cy="${s/2}" r="${r}" fill="none" stroke="#E2E8F0" stroke-width="${stroke}"/>
    <circle cx="${s/2}" cy="${s/2}" r="${r}" fill="none" stroke="${color||'#2BA8A2'}" stroke-width="${stroke}"
      stroke-dasharray="${c.toFixed(2)}" stroke-dashoffset="${off.toFixed(2)}" stroke-linecap="round"/>
  </svg>`;
}

/* v24.0 — Sample data for pickers */
const CT_SITES = [
  { code:'S-01', name_th:'อาคาร A · Tower Main', name_en:'Building A · Main Tower',
    category_th:'อาคารสำนักงานหลัก', category_en:'Main office tower',
    icon:'🏢', color:'#2BA8A2', totalAreaM2:12400, activeTasks:34,
    location_th:'ด้านตะวันออกของโครงการ', location_en:'East side of site',
    zones:[
      { code:'Z-1',  name_th:'ชั้น 1 · Lobby',   name_en:'Floor 1 · Lobby',
        type:'lobby',   icon:'🚪', desc_th:'พื้นที่ต้อนรับ · Reception',        desc_en:'Reception area',   activeTasks:6 },
      { code:'Z-2',  name_th:'ชั้น 2 · Office',  name_en:'Floor 2 · Office',
        type:'office',  icon:'💼', desc_th:'สำนักงานเช่า · Rentable',           desc_en:'Rentable office',  activeTasks:11 },
      { code:'Z-5',  name_th:'ชั้น 5 · Office',  name_en:'Floor 5 · Office',
        type:'office',  icon:'💼', desc_th:'สำนักงานผู้บริหาร',                    desc_en:'Executive floor',  activeTasks:9 },
      { code:'Z-R',  name_th:'ดาดฟ้า · Rooftop', name_en:'Rooftop',
        type:'rooftop', icon:'🏙️', desc_th:'ระบบ MEP · Cooling tower · Antenna', desc_en:'MEP · Cooling',    activeTasks:8 }
    ]
  },
  { code:'S-02', name_th:'อาคาร B · Parking', name_en:'Building B · Parking',
    category_th:'อาคารจอดรถ', category_en:'Parking structure',
    icon:'🅿️', color:'#7C3AED', totalAreaM2:4800, activeTasks:8,
    location_th:'ด้านตะวันตกของโครงการ', location_en:'West side of site',
    zones:[
      { code:'Z-B1', name_th:'ใต้ดิน 1', name_en:'Basement 1',
        type:'basement', icon:'🚗', desc_th:'จอดรถลูกค้า · 120 คัน',   desc_en:'Guest parking · 120 slots', activeTasks:5 },
      { code:'Z-B2', name_th:'ใต้ดิน 2', name_en:'Basement 2',
        type:'basement', icon:'🚗', desc_th:'จอดรถพนักงาน · 180 คัน', desc_en:'Staff parking · 180 slots',  activeTasks:3 }
    ]
  },
  { code:'S-03', name_th:'ไซต์รอบนอก · External', name_en:'External Site',
    category_th:'พื้นที่รอบอาคาร', category_en:'External areas',
    icon:'🌳', color:'#059669', totalAreaM2:3200, activeTasks:5,
    location_th:'พื้นที่รอบโครงการ', location_en:'Perimeter of project',
    zones:[
      { code:'Z-G', name_th:'พื้นที่จอดรถหน้าโครงการ', name_en:'Front parking',
        type:'external', icon:'🅿️', desc_th:'ลานจอดรถชั่วคราว',   desc_en:'Temporary parking',   activeTasks:2 },
      { code:'Z-L', name_th:'Lobby ทางเข้าหลัก',       name_en:'Main entrance lobby',
        type:'lobby',    icon:'🚪', desc_th:'พื้นที่ต้อนรับภายนอก', desc_en:'External reception',  activeTasks:3 }
    ]
  }
];

/* v30.0 — Zone type label helper */
function zoneTypeLabel(t){
  const m = {
    lobby:    { th:'พื้นที่ต้อนรับ', en:'Lobby',   color:'#0F766E', bg:'#CCFBF1' },
    office:   { th:'สำนักงาน',      en:'Office',   color:'#4338CA', bg:'#E0E7FF' },
    rooftop:  { th:'ดาดฟ้า',         en:'Rooftop',  color:'#B45309', bg:'#FEF3C7' },
    basement: { th:'ใต้ดิน',         en:'Basement', color:'#6B21A8', bg:'#F3E8FF' },
    external: { th:'พื้นที่นอก',      en:'External', color:'#166534', bg:'#DCFCE7' }
  };
  return m[t] || { th:'พื้นที่ทั่วไป', en:'Area', color:'#334155', bg:'#F1F5F9' };
}

const CT_WBS = [
  { l1:'1', name_th:'งานโครงสร้าง', name_en:'Structural Work',
    icon:'🏗️', color:'#4338CA', desc_th:'โครงสร้างหลักของอาคาร', desc_en:'Main building structure',
    l2:[
      { l2:'1.1', name_th:'งานฐานราก', name_en:'Foundation', l3:[
        { code:'1.1.1', name_th:'งานเสาเข็ม', name_en:'Piling',
          refStd:'มยผ. 1103-56', activeTasks:3, planStatus:'ready' },
        { code:'1.1.2', name_th:'งานฐานราก', name_en:'Footing',
          refStd:'มยผ. 1103-56', activeTasks:2, planStatus:'ready' }
      ]},
      { l2:'1.2', name_th:'งานเทคอนกรีต', name_en:'Concrete Work', l3:[
        { code:'1.2.1', name_th:'เสาชั้น 1-3', name_en:'Column F1-F3',
          refStd:'มยผ. 1104-56', activeTasks:5, planStatus:'in-progress' },
        { code:'1.2.2', name_th:'พื้นชั้น 1-3', name_en:'Slab F1-F3',
          refStd:'มยผ. 1104-56', activeTasks:2, planStatus:'in-progress' }
      ]}
    ]
  },
  { l1:'2', name_th:'งานตกแต่ง', name_en:'Finishing',
    icon:'🎨', color:'#EA580C', desc_th:'งานตกแต่งภายในและภายนอก', desc_en:'Interior + exterior finishing',
    l2:[
      { l2:'2.1', name_th:'งานสี', name_en:'Painting', l3:[
        { code:'2.1.1', name_th:'สีภายใน', name_en:'Interior paint',
          refStd:'TIS 1069-2549', activeTasks:8, planStatus:'active' },
        { code:'2.1.2', name_th:'สีภายนอก', name_en:'Exterior paint',
          refStd:'TIS 1069-2549', activeTasks:4, planStatus:'ready' }
      ]},
      { l2:'2.2', name_th:'งานพื้น', name_en:'Flooring', l3:[
        { code:'2.2.1', name_th:'ปูกระเบื้อง', name_en:'Tile installation',
          refStd:'TIS 2508-2555', activeTasks:6, planStatus:'active' }
      ]}
    ]
  },
  { l1:'3', name_th:'งานระบบ MEP', name_en:'MEP',
    icon:'⚡', color:'#059669', desc_th:'ระบบไฟฟ้า · สุขาภิบาล · ปรับอากาศ', desc_en:'Electrical · Plumbing · HVAC',
    l2:[
      { l2:'3.1', name_th:'งานไฟฟ้า', name_en:'Electrical', l3:[
        { code:'3.1.1', name_th:'ระบบไฟฟ้าหลัก', name_en:'Main electrical',
          refStd:'วสท. 3001-56', activeTasks:2, planStatus:'ready' },
        { code:'3.1.2', name_th:'ระบบไฟส่องสว่าง', name_en:'Lighting',
          refStd:'วสท. 3001-56', activeTasks:3, planStatus:'ready' }
      ]},
      { l2:'3.2', name_th:'งานประปา', name_en:'Plumbing', l3:[
        { code:'3.2.1', name_th:'ท่อประปาชั้น 1-3', name_en:'Water pipe F1-F3',
          refStd:'มยผ. 1801-56', activeTasks:1, planStatus:'ready' }
      ]}
    ]
  }
];

/* v33.0 · Plan status label helper */
function wbsPlanStatusLabel(s){
  if(s === 'active')      return { th:'กำลังทำงาน', en:'Active',      color:'#0F766E', bg:'#CCFBF1' };
  if(s === 'in-progress') return { th:'ดำเนินการอยู่', en:'In progress', color:'#B45309', bg:'#FEF3C7' };
  if(s === 'ready')       return { th:'พร้อมเริ่ม',    en:'Ready',       color:'#334155', bg:'#F1F5F9' };
  return { th:'-', en:'-', color:'#94A3B8', bg:'#F8FAFC' };
}

/* v33.0 · Count L3 items in an L1 */
function wbsCountL3(l1obj){
  return l1obj.l2.reduce((sum, l2) => sum + l2.l3.length, 0);
}
function wbsCountActive(l1obj){
  return l1obj.l2.reduce((sum, l2) => sum + l2.l3.reduce((a, l3) => a + (l3.activeTasks||0), 0), 0);
}

const CT_INSPECTORS = [
  { email:'kittisak.c@tarnas.co.th', name_th:'คิตติศักดิ์ ชัยวัฒน์', name_en:'Kittisak C.', avatar:'คช', role:'QC Inspector', activeTasks:4, nextFree:'27 มิ.ย.', overdue:0 },
  { email:'narong.b@tarnas.co.th',   name_th:'ณรงค์ บุญมี',         name_en:'Narong B.',   avatar:'นบ', role:'QC Inspector', activeTasks:2, nextFree:'24 มิ.ย.', overdue:0 },
  { email:'apinya.w@tarnas.co.th',   name_th:'อภินยา วงศ์สุข',        name_en:'Apinya W.',   avatar:'อว', role:'QC Inspector', activeTasks:6, nextFree:'2 ก.ค.',  overdue:1 },
  { email:'somchai.j@tarnas.co.th',  name_th:'สมชาย จันทร์เพ็ญ',      name_en:'Somchai J.',   avatar:'สจ', role:'QC Inspector', activeTasks:1, nextFree:'23 มิ.ย.', overdue:0 },
  { email:'preecha.k@tarnas.co.th',  name_th:'ปรีชา กังวานเลิศ',       name_en:'Preecha K.',   avatar:'ปก', role:'QC Inspector', activeTasks:3, nextFree:'25 มิ.ย.', overdue:0 }
];

const CT_APPROVERS = [
  { email:'son.p@tarnas.co.th',      name_th:'สน ประเสริฐศรี',         name_en:'Son P.',       avatar:'สน', role:'QC Manager',      activeTasks:5, nextFree:'25 มิ.ย.', overdue:0 },
  { email:'anucha.t@tarnas.co.th',   name_th:'อนุชา ธนบูรณ์',           name_en:'Anucha T.',    avatar:'อธ', role:'QC Manager',      activeTasks:3, nextFree:'23 มิ.ย.', overdue:0 },
  { email:'wichai.c@tarnas.co.th',   name_th:'วิชัย จันทร์เพ็ญ',         name_en:'Wichai C.',    avatar:'วจ', role:'Project Manager', activeTasks:8, nextFree:'28 มิ.ย.', overdue:2 },
  { email:'suchada.n@tarnas.co.th',  name_th:'สุชาดา แนวหน้า',          name_en:'Suchada N.',   avatar:'สน', role:'Project Manager', activeTasks:4, nextFree:'24 มิ.ย.', overdue:0 }
];

/* v42.0 — Sub Contractors (ผู้รับผิดชอบแก้ NCR) · used by combined Edit Modal */
const CT_SUBS = [
  { email:'somchai.j@site.co.th', name_th:'ผรช.สมชาย จันทร์เพ็ญ',   name_en:'Foreman Somchai J.',    avatar:'สม', role:'Foreman',    spec_th:'ทั่วไป',   spec_en:'General',    activeTasks:5, nextFree:'25 มิ.ย.', overdue:0 },
  { email:'anucha.e@site.co.th', name_th:'ผรช.อนุชา ไฟฟ้า',       name_en:'Foreman Anucha (Elec.)', avatar:'อน', role:'Foreman',    spec_th:'ไฟฟ้า',   spec_en:'Electrical', activeTasks:3, nextFree:'23 มิ.ย.', overdue:0 },
  { email:'apinya.w@site.co.th', name_th:'อภินยา วงศ์สุข',         name_en:'Apinya W.',              avatar:'อว', role:'Engineer',   spec_th:'โครงสร้าง', spec_en:'Structural', activeTasks:2, nextFree:'22 มิ.ย.', overdue:1 },
  { email:'rungrote.s@site.co.th', name_th:'ผรช.รุ่งโรจน์ ศ.',    name_en:'Foreman Rungrote S.',    avatar:'รร', role:'Foreman',    spec_th:'โยธา',     spec_en:'Civil',      activeTasks:1, nextFree:'21 มิ.ย.', overdue:0 },
  { email:'wichai.t@site.co.th', name_th:'ผรช.วิชัย ต.',          name_en:'Foreman Wichai T.',      avatar:'วช', role:'Foreman',    spec_th:'สถาปัตย์',  spec_en:'Architect',  activeTasks:6, nextFree:'27 มิ.ย.', overdue:2 }
];

function workloadLevel(n){ return n <= 2 ? 'free' : n <= 4 ? 'med' : 'busy'; }
function findPerson(email, list){ return list.find(p => p.email === email); }

/* ============================================================
   STATE + NAVIGATION
   ============================================================ */
const state = {
  lang: 'th',
  role: 'inspector',
  filter: 'all',
  screen: 'list',     // list | detail | checklist | ncr | submit | create | qcmReview (v35.0) | inspectorReassign (v36.0)
  taskCode: null,
  ncrId: null,
  tab: 'overview',
  history: [],
  ckl: {},            // P-A01 → pass/fail/skip
  // v17.0 — seed sample: P-A01 already passed so wizard filter shows 6 remaining (out of 7)
  cklSet: { 'P-A01': 'pass' },
  cklComments: { 'P-A01': 'วัด total station 24 ต้น · ค่าสูงสุด 18 มม.' },
  // v17.0 — NCR confirm dialog state
  ncrConfirm: null,   // { code, label } | null
  // v35.0 — QCM Approve summary screen state (retained but unused after v36.0 gate change)
  qcmModal: null,     // null | 'alert' | 'confirm'
  qcmNote: '',        // optional QCM approval note
  // v36.0 — Inspector Reassign picker (NCR-scoped · unused after v37 modal)
  reassignNcrId: null,
  // v37.0 — Reassign Modal + pinned task
  reassignModal: null,   // null | { context:'task'|'ncr', ncrId?:string }
  pinnedTaskCode: null,  // task code to place at top of list after reassign
  // v41.0 — Edit Corrective Modal (QCM edits NCR corrective action) · superseded by v42 combined modal
  editCorrectiveModal: null,  // null | { ncrId }
  reassignSentNotif: null,    // last inspector name notified · shown on list header
  // v42.0 — Combined Edit + Reassign Modal · 3 sections (corrective / owner / due)
  editNcrModal: null,         // null | { ncrId, tempCorrectTh, tempCorrectEn, tempOwnerEmail, tempDue }
  // v24.0 — Create Task form state + picker overlays
  createForm: {
    codeMode: 'auto',
    code: 'TQ-2026-061',
    name: '',
    description: '',
    projectId: 'tarnas-tower',
    siteCode: '', zoneCode: '',
    wbsL3Code: '',
    workflowId: 'wf-qc-standard',
    checklistId: 'ck-paint-v1',
    priority: 'high',
    startDate: '2026-06-22',
    dueDate: '2026-06-29',
    inspectorEmail: '',
    approverEmail: ''
  },
  showPicker: null,     // 'project' | 'site' | 'wbs' | 'inspector' | 'approver' | null
  pickerPending: null,  // pending selection before user confirms
  // v25.0 — search + sort + collapse state for pickers
  pickerSearch: '',
  pickerSort: 'workload',   // 'workload' | 'name' | 'availability'
  wbsCollapse: {},          // { '1':true, '2':false, ... } — collapsed L1 keys
  siteCollapse: {},         // { 'S-01':true, ... } — collapsed site keys
  // v26.0 — Project picker: category filter chip
  projectFilter: 'all',     // 'all' | 'active' | 'near' | 'starting'
  // v30.0 — Site/Zone picker: two-step navigation (unused after v31 modal, kept safe)
  sitePickerStep: 1,        // 1 = pick site · 2 = pick zone
  sitePickerSiteCode: '',   // site chosen in step 1 (used to filter zones in step 2)
  // v33.0 — WBS picker: current L1 in bottom sheet modal
  wbsPickerL1: '1',         // current L1 code selected in pills · default first
};

function navigate(screen, params = {}, fromHistory = false){
  if(!fromHistory){
    state.history.push({screen: state.screen, taskCode: state.taskCode, ncrId: state.ncrId, tab: state.tab});
  }
  state.screen = screen;
  if(params.taskCode !== undefined) state.taskCode = params.taskCode;
  if(params.ncrId !== undefined) state.ncrId = params.ncrId;
  if(params.tab !== undefined) state.tab = params.tab;
  render();
  window.scrollTo(0, 0);
  const sc = document.getElementById('appScroll');
  if(sc) sc.scrollTop = 0;
}

function back(){
  if(state.history.length === 0){
    // Fall back to list
    state.screen = 'list';
    render();
    return;
  }
  const prev = state.history.pop();
  state.screen = prev.screen;
  state.taskCode = prev.taskCode;
  state.ncrId = prev.ncrId;
  state.tab = prev.tab;
  render();
}

function showToast(msg){
  const t = document.getElementById('toast');
  t.textContent = msg;
  t.classList.add('show');
  clearTimeout(window.__tt);
  window.__tt = setTimeout(() => t.classList.remove('show'), 2500);
}

/* ============================================================
   v35.0 — QCM APPROVE SUMMARY SCREEN
   Displays every checklist item + verdict + open NCRs before QCM
   confirms approval. Save button is guarded — if any item is not
   'pass' or any NCR is still open, an Alert modal blocks the save.
   ============================================================ */
function renderQcmReview(){
  const t = TASKS.find(x => x.code === state.taskCode);
  if(!t) return '<div class="empty-stage">Task not found</div>';

  /* Group items by section for readable summary */
  const items = (typeof ALL_ITEMS !== 'undefined' && Array.isArray(ALL_ITEMS)) ? ALL_ITEMS : [];
  const bySec = {};
  items.forEach(it => {
    const key = it.sec || '-';
    if(!bySec[key]) bySec[key] = { code:key, nameTh:it.secNameTh || '-', nameEn:it.secNameEn || '-', list:[] };
    bySec[key].list.push(it);
  });

  /* Compute counts using state.cklSet */
  const ck = state.cklSet || {};
  let passCnt=0, failCnt=0, warnCnt=0, pendingCnt=0;
  items.forEach(it => {
    const v = ck[it.code];
    if(v === 'pass' || v === 'answered')      passCnt++;
    else if(v === 'fail')                     failCnt++;
    else if(v === 'warn')                     warnCnt++;
    else                                      pendingCnt++;
  });
  const totalCnt = items.length;

  /* Open NCRs on this task */
  const openNcrs = (typeof NCRS === 'object' && NCRS)
    ? Object.values(NCRS).filter(n => n && n.taskCode === t.code && n.status !== 'closed')
    : [];

  const canApprove = (failCnt === 0 && pendingCnt === 0 && openNcrs.length === 0);
  const blockReasonTh = [];
  const blockReasonEn = [];
  if(failCnt > 0)        { blockReasonTh.push(`${failCnt} รายการไม่ผ่าน`);      blockReasonEn.push(`${failCnt} failed`); }
  if(pendingCnt > 0)     { blockReasonTh.push(`${pendingCnt} รายการยังไม่ตรวจ`); blockReasonEn.push(`${pendingCnt} pending`); }
  if(openNcrs.length > 0){ blockReasonTh.push(`NCR เปิดอยู่ ${openNcrs.length} ใบ`); blockReasonEn.push(`${openNcrs.length} open NCR${openNcrs.length>1?'s':''}`); }

  /* Item row HTML */
  const rowHtml = (it) => {
    const v = ck[it.code] || 'pending';
    let vLabelTh, vLabelEn, vCls, vIco;
    if(v === 'pass' || v === 'answered') { vLabelTh='ผ่าน';       vLabelEn='Pass';    vCls='qcr-vp'; vIco='✓'; }
    else if(v === 'fail')                { vLabelTh='ไม่ผ่าน';    vLabelEn='Fail';    vCls='qcr-vf'; vIco='✗'; }
    else if(v === 'warn')                { vLabelTh='เตือน';      vLabelEn='Warn';    vCls='qcr-vw'; vIco='⚠'; }
    else                                 { vLabelTh='ยังไม่ตรวจ'; vLabelEn='Pending'; vCls='qcr-vn'; vIco='◯'; }
    const cmt = (state.cklComments && state.cklComments[it.code]) || '';
    const cmtHtml = cmt ? `<div class="qcr-cmt">💬 ${cmt}</div>` : '';
    return `
      <div class="qcr-row ${vCls}">
        <div class="qcr-rl">
          <div class="qcr-code">${it.code}</div>
          <div class="qcr-title">${L(it.th, it.en)}</div>
          ${cmtHtml}
        </div>
        <div class="qcr-vbadge ${vCls}">${vIco} ${L(vLabelTh, vLabelEn)}</div>
      </div>`;
  };

  const sectionsHtml = Object.values(bySec).map(sec => `
    <div class="qcr-sec">
      <div class="qcr-sec-h">
        <span class="qcr-sec-code">${sec.code}</span>
        <span class="qcr-sec-name">${L(sec.nameTh, sec.nameEn)}</span>
        <span class="qcr-sec-cnt">${sec.list.length} ${L('ข้อ','items')}</span>
      </div>
      ${sec.list.map(rowHtml).join('')}
    </div>
  `).join('');

  const ncrsHtml = openNcrs.length > 0 ? `
    <div class="qcr-sec qcr-sec-ncr">
      <div class="qcr-sec-h">
        <span class="qcr-sec-code" style="background:var(--error,#EF4444)">⚠</span>
        <span class="qcr-sec-name">${L('NCR ที่ยังเปิดอยู่','Open NCRs')}</span>
        <span class="qcr-sec-cnt">${openNcrs.length}</span>
      </div>
      ${openNcrs.map(n => `
        <div class="qcr-ncr-row">
          <div class="qcr-ncr-id">${n.id}</div>
          <div class="qcr-ncr-t">${L(n.title || 'NCR','NCR')}</div>
          <div class="qcr-ncr-st">${(n.status||'').toUpperCase()}</div>
        </div>
      `).join('')}
    </div>
  ` : '';

  /* Alert / Confirm modal — driven by state.qcmModal */
  const modal = state.qcmModal;
  let modalHtml = '';
  if(modal === 'alert'){
    modalHtml = `
      <div class="qcm-modal-overlay">
        <div class="qcm-modal qcm-modal-alert">
          <div class="qcm-modal-ico qcm-modal-ico-red">❌</div>
          <div class="qcm-modal-title">${L('ไม่สามารถอนุมัติได้','Cannot Approve')}</div>
          <div class="qcm-modal-desc">${L(
            'ยังมี Checklist ที่ตรวจไม่ผ่าน โปรดให้ Inspector ตรวจซ้ำ และปิด NCR ก่อนอนุมัติ',
            'Some checklist items are not passed. Ask Inspector to re-check and close open NCRs before approving.'
          )}</div>
          <div class="qcm-modal-list">
            ${blockReasonTh.map((r,i) => `<div class="qcm-modal-li">• ${L(r, blockReasonEn[i])}</div>`).join('')}
          </div>
          <div class="qcm-modal-bar">
            <button class="qcm-modal-btn qcm-modal-btn-primary" data-act="qcm-alert-close">${L('รับทราบ','Acknowledge')}</button>
          </div>
        </div>
      </div>`;
  } else if(modal === 'confirm'){
    modalHtml = `
      <div class="qcm-modal-overlay">
        <div class="qcm-modal qcm-modal-confirm">
          <div class="qcm-modal-ico qcm-modal-ico-green">✓</div>
          <div class="qcm-modal-title">${L('ยืนยันอนุมัติผลตรวจ','Confirm Approval')}</div>
          <div class="qcm-modal-desc">${L(
            'ทุกรายการผ่านการตรวจสอบ · Task จะเปลี่ยนสถานะเป็น DONE',
            'All items passed · task will transition to DONE'
          )}</div>
          <div class="qcm-modal-summary">
            <div><b>${L('งาน','Task')}:</b> ${t.code}</div>
            <div><b>${L('ผู้ตรวจ','Inspector')}:</b> ${t.owner || '-'}</div>
            <div><b>${L('รายการ','Items')}:</b> ${passCnt}/${totalCnt} ${L('ผ่าน','pass')}</div>
          </div>
          <div class="qcm-modal-bar">
            <button class="qcm-modal-btn qcm-modal-btn-ghost" data-act="qcm-confirm-cancel">${L('ยกเลิก','Cancel')}</button>
            <button class="qcm-modal-btn qcm-modal-btn-success" data-act="qcm-confirm-ok">${L('ยืนยัน','Confirm')}</button>
          </div>
        </div>
      </div>`;
  }

  return `
    <div class="screen-head">
      <button class="back" data-act="back">←</button>
      <div class="title">
        <div class="t-main">${L('สรุปงานก่อนอนุมัติ','Approval Summary')}</div>
        <div class="t-sub">${t.code} · ${L(t.nameTh, t.nameEn)}</div>
      </div>
      <div class="head-act">
        <div class="lang-toggle">
          <button class="${state.lang==='th'?'on':''}" data-act="lang" data-val="th">TH</button>
          <button class="${state.lang==='en'?'on':''}" data-act="lang" data-val="en">EN</button>
        </div>
      </div>
    </div>

    <div class="qcr-stats">
      <div class="qcr-stat qcr-stat-pass">
        <div class="qcr-stat-n">${passCnt}</div>
        <div class="qcr-stat-l">${L('ผ่าน','Pass')}</div>
      </div>
      <div class="qcr-stat qcr-stat-fail">
        <div class="qcr-stat-n">${failCnt}</div>
        <div class="qcr-stat-l">${L('ไม่ผ่าน','Fail')}</div>
      </div>
      <div class="qcr-stat qcr-stat-warn">
        <div class="qcr-stat-n">${warnCnt}</div>
        <div class="qcr-stat-l">${L('เตือน','Warn')}</div>
      </div>
      <div class="qcr-stat qcr-stat-pending">
        <div class="qcr-stat-n">${pendingCnt}</div>
        <div class="qcr-stat-l">${L('ยังไม่ตรวจ','Pending')}</div>
      </div>
    </div>

    ${!canApprove ? `
      <div class="qcr-alert-bar">
        <span class="qcr-alert-ico">⚠</span>
        <span class="qcr-alert-txt">${L(
          'ยังไม่พร้อมอนุมัติ · ' + blockReasonTh.join(' · '),
          'Not ready to approve · ' + blockReasonEn.join(' · ')
        )}</span>
      </div>` : `
      <div class="qcr-ok-bar">
        <span class="qcr-alert-ico">✓</span>
        <span class="qcr-alert-txt">${L('พร้อมอนุมัติ · ทุกรายการผ่าน','Ready to approve · all items passed')}</span>
      </div>`}

    <div class="qcr-body">
      ${sectionsHtml || `<div class="empty-stage">${L('ไม่มีข้อมูล Checklist','No checklist items')}</div>`}
      ${ncrsHtml}

      <div class="qcr-note">
        <label class="qcr-note-l">${L('หมายเหตุการอนุมัติ (ไม่บังคับ)','Approval note (optional)')}</label>
        <textarea class="qcr-note-i" id="qcm-note" placeholder="${L('เช่น: ตรวจครบทุกรายการ ผลผ่านทั้งหมด','e.g. All items passed inspection')}">${state.qcmNote || ''}</textarea>
      </div>
    </div>

    <div class="submit-bar">
      <button class="btn-save" data-act="back">${L('ยกเลิก','Cancel')}</button>
      <button class="btn-primary" data-act="qcm-approve-save">
        ✓ ${L('ยืนยันอนุมัติ','Confirm Approve')}
      </button>
    </div>

    ${modalHtml}
  `;
}

/* ============================================================
   v37.0 — REASSIGN MODAL (bottom sheet)
   Opens over any screen when state.reassignModal is set.
   Two contexts:
     · { context: 'task' }              → invoked from "ส่งกลับให้ตรวจซ้ำ"
     · { context: 'ncr', ncrId: '...' } → invoked from NCR Detail
   After a pick: parent task state = 'assigned', navigate to list,
   pinnedTaskCode set so the task appears at the top of the list.
   ============================================================ */
function renderReassignModal(){
  const m = state.reassignModal;
  if(!m) return '';
  const t = TASKS.find(x => x.code === state.taskCode);
  const isNcr = m.context === 'ncr';
  const n = isNcr && m.ncrId ? NCRS[m.ncrId] : null;

  const list = (typeof CT_INSPECTORS !== 'undefined' && Array.isArray(CT_INSPECTORS)) ? CT_INSPECTORS : [];
  const sorted = list.slice().sort((a, b) => (a.activeTasks || 0) - (b.activeTasks || 0));

  const inspectorRow = (p) => {
    const wl = workloadLevel(p.activeTasks || 0);
    const wlLbl = wl === 'free' ? L('ว่างมาก','Free')
                : wl === 'med'  ? L('พอมี','Med')
                                : L('งานเยอะ','Busy');
    /* v38.0 — row is display-only · explicit "เลือก" button on the right */
    return `
      <div class="rm-item">
        <div class="rm-avatar">${p.avatar || (p.name_en||'?').slice(0,2)}</div>
        <div class="rm-body">
          <div class="rm-name">${L(p.name_th, p.name_en)}</div>
          <div class="rm-role">${p.role || 'QC Inspector'}</div>
          <div class="rm-meta">
            <span>📋 ${p.activeTasks || 0} ${L('งาน','tasks')}</span>
            <span>🗓 ${L('ว่าง','free')} ${p.nextFree || '-'}</span>
            ${(p.overdue > 0) ? `<span class="over">⚠ ${L('เลย','overdue')} ${p.overdue}</span>` : ''}
          </div>
          <div class="rm-wl-inline">
            <span class="rm-wl-chip rm-wl-${wl}">${wlLbl}</span>
            <span class="rm-wl-n">${p.activeTasks || 0} ${L('งาน','tasks')}</span>
          </div>
        </div>
        <button class="rm-pick-btn" data-act="pick-reassign-inspector" data-email="${p.email}">
          ${L('เลือก','Select')}
        </button>
      </div>`;
  };

  const ctxTitle = isNcr
    ? L('มอบหมาย QC Inspector ใหม่ (NCR)', 'Reassign QC Inspector (NCR)')
    : L('ส่งกลับให้ QC Inspector ตรวจซ้ำ', 'Return to QC Inspector for Re-check');
  const ctxSub = isNcr && n
    ? `${n.id} · ${L(n.titleTh, n.titleEn)}`
    : (t ? `${t.code} · ${L(t.nameTh, t.nameEn)}` : '');

  return `
    <div class="rm-overlay" data-act="close-reassign-modal">
      <div class="rm-sheet">
        <div class="rm-handle"></div>
        <div class="rm-head">
          <div class="rm-title">${ctxTitle}</div>
          <div class="rm-sub">${ctxSub}</div>
          <button class="rm-close" type="button" data-act="close-reassign-modal" aria-label="Close">✕</button>
        </div>
        <div class="rm-hint">
          👤 ${L('เลือก QC Inspector · เรียงจากงานน้อยไปมาก','Pick QC Inspector · sorted by workload')}
        </div>
        <div class="rm-list">
          ${sorted.length === 0
            ? `<div class="empty-stage" style="padding:32px">${L('ไม่มี QC Inspector','No inspectors')}</div>`
            : sorted.map(inspectorRow).join('')}
        </div>
      </div>
    </div>
  `;
}

/* ============================================================
   v41.0 — EDIT CORRECTIVE ACTION MODAL (bottom sheet)
   QCM opens this from NCR Detail · edits ncr.correctTh + correctEn ·
   Save updates the NCR and shows notification toast.
   ============================================================ */
function renderEditCorrectiveModal(){
  const m = state.editCorrectiveModal;
  if(!m) return '';
  const n = m.ncrId ? NCRS[m.ncrId] : null;
  if(!n) return '';

  return `
    <div class="ec-overlay" data-act="close-edit-corrective-modal">
      <div class="ec-sheet">
        <div class="ec-handle"></div>
        <div class="ec-head">
          <div class="ec-title">${L('แก้ไขแนวทางแก้ไข NCR','Edit NCR Corrective Action')}</div>
          <div class="ec-sub">${n.id} · ${L(n.titleTh, n.titleEn)}</div>
          <button class="ec-close" type="button" data-act="close-edit-corrective-modal" aria-label="Close">✕</button>
        </div>
        <div class="ec-hint">
          📝 ${L('แก้ไขข้อความแนวทางแก้ไข · บันทึกเสร็จจะส่ง Notification แจ้ง Inspector + Sub Contractor',
                 'Edit corrective steps · Notifies Inspector + Sub Contractor after save')}
        </div>
        <div class="ec-body">
          <label class="ec-lbl">${L('แนวทางแก้ไข (ภาษาไทย)','Corrective Action (Thai)')}</label>
          <textarea class="ec-input" id="ec-input-th" rows="6"
            placeholder="${L('พิมพ์แนวทางแก้ไขทีละขั้นตอน...','Enter step-by-step corrective action...')}">${(n.correctTh || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')}</textarea>
          <label class="ec-lbl" style="margin-top:12px">${L('Corrective Action (English)','Corrective Action (English)')}</label>
          <textarea class="ec-input" id="ec-input-en" rows="6"
            placeholder="${L('Type corrective steps line by line...','Type corrective steps line by line...')}">${(n.correctEn || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')}</textarea>
        </div>
        <div class="ec-bar">
          <button class="ec-btn ec-btn-ghost" type="button" data-act="close-edit-corrective-modal">
            ${L('ยกเลิก','Cancel')}
          </button>
          <button class="ec-btn ec-btn-primary" type="button" data-act="save-edit-corrective" data-ncr="${n.id}">
            💾 ${L('บันทึก','Save')}
          </button>
        </div>
      </div>
    </div>
  `;
}

/* ============================================================
   v42.0 — COMBINED EDIT + REASSIGN NCR MODAL (bottom sheet)
   QCM opens this from NCR Detail · edits 3 things at once:
     (1) Corrective action (TH + EN textareas)
     (2) Owner / Sub Contractor (list with workload · tap card to select)
     (3) Due date (native date input)
   Save updates NCR + shows notification toast.
   ============================================================ */
function renderEditNcrModal(){
  const m = state.editNcrModal;
  if(!m) return '';
  const n = m.ncrId ? NCRS[m.ncrId] : null;
  if(!n) return '';

  const escape = (s) => (s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  const currentCorrectTh = m.tempCorrectTh != null ? m.tempCorrectTh : n.correctTh;
  const currentCorrectEn = m.tempCorrectEn != null ? m.tempCorrectEn : n.correctEn;
  const currentDue = m.tempDue != null ? m.tempDue : (n._dueIso || todayIsoPlus(2));
  const selectedEmail = m.tempOwnerEmail || null;

  const subs = (typeof CT_SUBS !== 'undefined' && Array.isArray(CT_SUBS)) ? CT_SUBS : [];
  const sorted = subs.slice().sort((a, b) => (a.activeTasks || 0) - (b.activeTasks || 0));

  const subRow = (p) => {
    const wl = workloadLevel(p.activeTasks || 0);
    const wlLbl = wl === 'free' ? L('ว่างมาก','Free')
                : wl === 'med'  ? L('พอมี','Med')
                                : L('งานเยอะ','Busy');
    const isSelected = selectedEmail === p.email;
    return `
      <div class="en-sub-item ${isSelected ? 'en-sub-selected' : ''}"
           data-act="pick-edit-ncr-owner" data-email="${p.email}">
        <div class="en-sub-avatar">${p.avatar || (p.name_en||'?').slice(0,2)}</div>
        <div class="en-sub-body">
          <div class="en-sub-name">${L(p.name_th, p.name_en)}</div>
          <div class="en-sub-role">${p.role} · ${L(p.spec_th || '', p.spec_en || '')}</div>
          <div class="en-sub-meta">
            <span>📋 ${p.activeTasks || 0} ${L('งาน','tasks')}</span>
            <span>🗓 ${p.nextFree || '-'}</span>
            ${(p.overdue > 0) ? `<span class="en-over">⚠ ${L('เลย','overdue')} ${p.overdue}</span>` : ''}
          </div>
        </div>
        <div class="en-sub-right">
          <span class="en-wl-chip en-wl-${wl}">${wlLbl}</span>
          ${isSelected ? `<span class="en-selected-badge">✓ ${L('เลือกแล้ว','Selected')}</span>` : ''}
        </div>
      </div>`;
  };

  return `
    <div class="en-overlay" data-act="close-edit-ncr-modal">
      <div class="en-sheet">
        <div class="en-handle"></div>
        <div class="en-head">
          <div class="en-title">${L('แก้ไข + มอบหมายใหม่ NCR','Edit + Reassign NCR')}</div>
          <div class="en-sub">${n.id} · ${L(n.titleTh, n.titleEn)}</div>
          <button class="en-close" type="button" data-act="close-edit-ncr-modal" aria-label="Close">✕</button>
        </div>

        <div class="en-body">

          <!-- Section 1: Corrective Action -->
          <div class="en-section">
            <div class="en-section-h">
              <span class="en-section-num">1</span>
              <span class="en-section-t">${L('แนวทางแก้ไข','Corrective Action')}</span>
            </div>
            <label class="en-lbl">${L('ภาษาไทย','Thai')}</label>
            <textarea class="en-input" id="en-input-th" rows="4"
              placeholder="${L('พิมพ์แนวทางแก้ไขทีละขั้นตอน...','Type steps...')}">${escape(currentCorrectTh)}</textarea>
            <label class="en-lbl" style="margin-top:8px">${L('English','English')}</label>
            <textarea class="en-input" id="en-input-en" rows="4"
              placeholder="${L('Type corrective steps...','Type corrective steps...')}">${escape(currentCorrectEn)}</textarea>
          </div>

          <!-- Section 2: Owner (Sub Contractor) · v43.0 · Dropdown -->
          ${(() => {
            const dropOpen = m.ownerDropdownOpen === true;
            const selectedSub = selectedEmail ? sorted.find(p => p.email === selectedEmail) : null;
            const displayName = selectedSub
              ? L(selectedSub.name_th, selectedSub.name_en)
              : (n.owner || L('— ยังไม่ได้เปลี่ยน —','— Not reassigned —'));
            const displaySub = selectedSub
              ? `${selectedSub.role} · ${L(selectedSub.spec_th || '', selectedSub.spec_en || '')}`
              : L('เลือกจาก dropdown ด้านล่างเพื่อมอบหมายใหม่','Tap dropdown to reassign');
            const dispWl = selectedSub ? workloadLevel(selectedSub.activeTasks || 0) : null;
            const dispWlLbl = dispWl
              ? (dispWl === 'free' ? L('ว่างมาก','Free') : dispWl === 'med' ? L('พอมี','Med') : L('งานเยอะ','Busy'))
              : '';
            return `
          <div class="en-section">
            <div class="en-section-h">
              <span class="en-section-num">2</span>
              <span class="en-section-t">${L('ผู้รับผิดชอบ (Sub Contractor)','Owner (Sub Contractor)')}</span>
              ${selectedEmail ? `<span class="en-section-badge">${L('เลือกใหม่','Reassigned')}</span>`
                              : `<span class="en-section-hint">${L('ปัจจุบัน:','Current:')} ${n.owner || '—'}</span>`}
            </div>

            <!-- Dropdown trigger -->
            <button class="en-dd-trigger ${dropOpen ? 'en-dd-open' : ''} ${selectedSub ? 'en-dd-selected' : ''}"
                    type="button" data-act="toggle-edit-ncr-owner-dropdown">
              ${selectedSub ? `<div class="en-dd-avatar">${selectedSub.avatar || (selectedSub.name_en||'?').slice(0,2)}</div>`
                             : `<div class="en-dd-avatar en-dd-avatar-placeholder">👤</div>`}
              <div class="en-dd-info">
                <div class="en-dd-name">${displayName}</div>
                <div class="en-dd-role">${displaySub}</div>
              </div>
              ${dispWl ? `<div class="en-dd-wl-mini en-wl-${dispWl}">${dispWlLbl}</div>` : ''}
              <div class="en-dd-caret">${dropOpen ? '▲' : '▼'}</div>
            </button>

            <!-- Dropdown panel (expands below trigger) -->
            ${dropOpen ? `
              <div class="en-dd-panel">
                <div class="en-dd-panel-hint">
                  👥 ${L('เรียงจากงานน้อยไปมาก · แตะเพื่อเลือก','Sorted by workload · tap to select')}
                </div>
                ${sorted.length === 0
                  ? `<div class="empty-stage" style="padding:20px">${L('ไม่มี Sub Contractor','No subs')}</div>`
                  : sorted.map(subRow).join('')}
              </div>` : ''}
          </div>
            `;
          })()}

          <!-- Section 3: Due Date -->
          <div class="en-section">
            <div class="en-section-h">
              <span class="en-section-num">3</span>
              <span class="en-section-t">${L('วันกำหนดแก้','Due Date')}</span>
              <span class="en-section-hint">${L('ปัจจุบัน:','Current:')} ${n.due || '—'}</span>
            </div>
            <input type="date" class="en-input en-date" id="en-input-due" value="${currentDue}" />
          </div>

        </div>

        <div class="en-bar">
          <button class="en-btn en-btn-ghost" type="button" data-act="close-edit-ncr-modal">
            ${L('ยกเลิก','Cancel')}
          </button>
          <button class="en-btn en-btn-primary" type="button" data-act="save-edit-ncr" data-ncr="${n.id}">
            💾 ${L('บันทึกทั้งหมด','Save All')}
          </button>
        </div>
      </div>
    </div>
  `;
}

/* Helper: today + N days as ISO 'YYYY-MM-DD' for date input default */
function todayIsoPlus(days){
  const d = new Date();
  d.setDate(d.getDate() + (days || 0));
  const iso = d.toISOString().slice(0, 10);
  return iso;
}

/* ============================================================
   SCREEN RENDERERS
   ============================================================ */
function render(){
  const sc = document.getElementById('appScroll');
  let body = '';
  if(state.screen === 'list')      body = renderList();
  else if(state.screen === 'detail')  body = renderDetail();
  else if(state.screen === 'checklist')body = renderChecklistExec();
  else if(state.screen === 'ncr')     body = renderNcrDetail();
  else if(state.screen === 'submit')  body = renderNcrSubmit();
  else if(state.screen === 'qcmReview') body = renderQcmReview();  /* v35.0 · retained but unused */
  else if(state.screen === 'inspectorReassign') body = renderInspectorReassign();  /* v36.0 */
  else if(state.screen === 'create')  body = renderCreate();
  else if(state.screen === 'ncrCreate') body = renderNcrCreate();
  else if(state.screen === 'ownerPick') body = renderOwnerPick();

  /* v37.0 — Reassign Modal overlay · rendered on top of any screen */
  if(state.reassignModal){
    body += renderReassignModal();
  }
  /* v41.0 — Edit Corrective Action Modal · same overlay pattern */
  if(state.editCorrectiveModal){
    body += renderEditCorrectiveModal();
  }
  /* v42.0 — Combined Edit + Reassign Modal · 3 sections */
  if(state.editNcrModal){
    body += renderEditNcrModal();
  }

  sc.innerHTML = body;
  renderFab();
  renderTabBar();
}

function L(th, en){ return state.lang === 'th' ? th : en; }
function ROL(){ return ROLE_META[state.role][state.lang === 'th' ? 'th' : 'en']; }

/* ============== TASK LIST ============== */
function renderList(){
  const r = state.role;
  let visible = TASKS.slice();
  /* v39.0 — filters aligned to wf-ncr-loop template roles */
  if(r === 'inspector') visible = visible.filter(t => ['assigned','in_progress','ncr_verify'].includes(t.state)); /* s-2..s-3, s-6 */
  else if(r === 'engineer') visible = visible.filter(t => t.state === 'ncr_open' || t.state === 'ncr_fixing');    /* s-4..s-5 · Sub Contractor */
  else if(r === 'qcm') visible = visible.filter(t => ['assigned','review','ncr_open'].includes(t.state));         /* s-2, s-7 + view NCR */

  if(state.filter === 'today') visible = visible.filter(t => t.dueIn >= 0 && t.dueIn <= 1);
  else if(state.filter === 'open') visible = visible.filter(t => t.state !== 'done');
  else if(state.filter === 'ncr') visible = visible.filter(t => t.ncrCount > 0);
  else if(state.filter === 'done') visible = visible.filter(t => t.state === 'done');

  /* v37.0 — sort pinned task to top */
  if(state.pinnedTaskCode){
    const pinned = visible.filter(t => t.code === state.pinnedTaskCode);
    const rest   = visible.filter(t => t.code !== state.pinnedTaskCode);
    visible = pinned.concat(rest);
  }

  const taskCards = visible.length === 0
    ? `<div class="empty-stage"><div class="ico">📭</div><div>${L('ไม่พบงานสำหรับบทบาทนี้','No tasks for this role')}</div></div>`
    : visible.map(t => {
        const html = taskCardHtml(t);
        /* v37.0 — mark reassigned task card with a subtle green pulse */
        if(state.pinnedTaskCode && t.code === state.pinnedTaskCode){
          return html.replace('class="t-card', 'class="t-card t-card-pinned');
        }
        return html;
      }).join('');

  return `
    <div class="screen-head">
      <div style="width:36px"></div>
      <div class="title">
        <div class="t-main">📋 ${L('งาน','Tasks')} <span class="role-chip ${r}">${ROL()}</span></div>
        <div class="t-sub">${L('กดการ์ดเพื่อเปิดรายละเอียด','Tap card to open detail')}</div>
      </div>
      <div class="head-act">
        <div class="lang-toggle">
          <button class="${state.lang==='th'?'on':''}" data-act="lang" data-val="th">🇹🇭</button>
          <button class="${state.lang==='en'?'on':''}" data-act="lang" data-val="en">🇬🇧</button>
        </div>
        <button>🔔<span class="bdg">5</span></button>
      </div>
    </div>

    <div class="role-bar">
      <span class="label">Role:</span>
      <div class="scroller">
        <button class="r-chip ${r==='pm'?'on':''}" data-role="pm">PM</button>
        <button class="r-chip ${r==='qcm'?'on':''}" data-role="qcm">QC Manager</button>
        <button class="r-chip ${r==='inspector'?'on':''}" data-role="inspector">QC Inspector</button>
        <button class="r-chip ${r==='engineer'?'on':''}" data-role="engineer">Field/Sub</button>
      </div>
    </div>

    <div class="search-bar">
      <input type="text" placeholder="${L('ค้นหา Task ด้วยรหัส ชื่อ ผู้รับผิดชอบ...','Search by code, name, assignee...')}" />
    </div>

    <div class="filter-bar">
      <button class="f-chip ${state.filter==='all'?'on':''}" data-f="all">${L('ทั้งหมด','All')}<span class="count">${visible.length}</span></button>
      <button class="f-chip ${state.filter==='today'?'on':''}" data-f="today">${L('วันนี้','Today')}</button>
      <button class="f-chip ${state.filter==='open'?'on':''}" data-f="open">${L('ยังไม่เสร็จ','Open')}</button>
      <button class="f-chip ${state.filter==='ncr'?'on':''}" data-f="ncr">${L('มี NCR','Has NCR')}</button>
      <button class="f-chip ${state.filter==='done'?'on':''}" data-f="done">${L('เสร็จแล้ว','Done')}</button>
    </div>

    <div class="t-list">${taskCards}</div>
  `;
}

function taskCardHtml(t){
  // v12.0 — Card layout matches web v28.0
  const name = L(t.nameTh, t.nameEn);
  const stateLbl = STATE_LABEL[t.state][state.lang === 'th' ? 0 : 1];
  const prioLbl = PRIO_LABEL[t.priority][state.lang === 'th' ? 0 : 1];
  const dueLbl = t.dueIn < 0 ? L(`${Math.abs(t.dueIn)} วันเลย`, `${Math.abs(t.dueIn)}d overdue`)
              : t.dueIn === 0 ? L('วันนี้','Today')
              : L(`${t.dueIn} วัน`, `${t.dueIn}d`);
  const dueCls = t.dueIn < 0 ? ' overdue' : (t.dueIn <= 3 ? ' soon' : '');
  const pct = Math.round(t.itemsDone / t.items * 100);
  // State color for progress bar fill
  const stateColors = {
    draft:'#94a3b8', assigned:'#A855F7', in_progress:'var(--sky)', review:'var(--warn)',
    ncr_open:'var(--error)', ncr_verify:'var(--purple)', done:'var(--success)'
  };
  const barColor = stateColors[t.state] || 'var(--teal)';
  // Assignee initials (first char of first word)
  const firstWord = (t.inspector || '?').split(' ')[0];
  const initials = firstWord.charAt(0);
  const ncrPill = t.ncrCount > 0 ? `<span class="ncr-pill">⚠ ${t.ncrCount}</span>` : '';

  return `<div class="t-card ${t.state}" data-task="${t.code}">
    <div class="t-top">
      <span class="code-group">
        <span class="code">${t.code}</span>
        <span class="state-badge ${t.state}">${stateLbl}</span>
      </span>
      <span class="prio-badge ${t.priority}">${prioLbl}</span>
    </div>
    <h4 class="t-name">${name}</h4>
    <div class="t-meta">
      <span><span class="ic">🔗</span> WBS ${t.wbsTh ? (state.lang==='th' ? t.wbsTh.split(' /')[0].replace('งาน','') : t.wbsEn) : ''}</span>
      <span>· ${L(t.zoneTh, t.zoneEn)}</span>
    </div>
    <div class="t-progress">
      <div class="bar"><i style="width:${pct}%; background:${barColor}"></i></div>
      <div class="foot">
        <span class="lbl">Checklist ${t.itemsDone}/${t.items}</span>
        <span class="pct">${pct}%</span>
      </div>
    </div>
    <div class="t-bot">
      <span class="assignee">
        <span class="avatar">${initials}</span>
        <span>${firstWord}</span>
      </span>
      <span>
        <span class="due${dueCls}">⏰ ${dueLbl}</span>
        ${ncrPill}
      </span>
    </div>
  </div>`;
}

/* ============== TASK DETAIL (4 TABS) ============== */
function renderDetail(){
  const t = TASKS.find(x => x.code === state.taskCode);
  if(!t) return `<div class="empty-stage">Task not found</div>`;
  const tab = state.tab || 'overview';

  let tabBody = '';
  if(tab === 'overview') tabBody = renderTabOverview(t);
  else if(tab === 'lifecycle') tabBody = renderTabLifecycle(t);
  else if(tab === 'checklist') tabBody = renderTabChecklist(t);
  else if(tab === 'ncr') tabBody = renderTabNcr(t);

  return `
    <div class="screen-head">
      <button class="back" data-act="back">←</button>
      <div class="title">
        <div class="t-main">${t.code}</div>
        <div class="t-sub">${L(t.nameTh, t.nameEn)}</div>
      </div>
      <div class="head-act">
        <div class="lang-toggle">
          <button class="${state.lang==='th'?'on':''}" data-act="lang" data-val="th">🇹🇭</button>
          <button class="${state.lang==='en'?'on':''}" data-act="lang" data-val="en">🇬🇧</button>
        </div>
      </div>
    </div>

    <nav class="tabs-nav">
      <button class="${tab==='overview'?'on':''}" data-tab="overview">${L('ภาพรวม','Overview')}</button>
      <button class="${tab==='lifecycle'?'on':''}" data-tab="lifecycle">${L('Lifecycle','Lifecycle')}</button>
      <button class="${tab==='checklist'?'on':''}" data-tab="checklist">Checklist<span class="bdg">${t.items}</span></button>
      <button class="${tab==='ncr'?'on':''}" data-tab="ncr">NCR${t.ncrCount>0?`<span class="bdg">${t.ncrCount}</span>`:''}</button>
    </nav>

    ${tabBody}
  `;
}

function renderTabOverview(t){
  const stateLbl = STATE_LABEL[t.state][state.lang === 'th' ? 0 : 1];
  const prioLbl = PRIO_LABEL[t.priority][state.lang === 'th' ? 0 : 1];
  const passCnt = t.itemsDone - t.ncrCount;
  const passRate = t.items > 0 ? Math.round(passCnt / t.items * 100) : 0;

  // Role-based actions
  const ROLE_ACTIONS = {
    pm: [
      { ico:'⚠', th:'Escalate ไป CEO', en:'Escalate to CEO', cls:'warn', toast:'ส่ง Escalation แล้ว · CEO ได้รับ Notification' },
      { ico:'❌', th:'อนุมัติยกเลิก Task', en:'Approve Cancel', cls:'ghost', toast:'อนุมัติการยกเลิก' },
    ],
    qcm: [
      /* v36.0 — Approve is direct-action · disabled unless passRate === 100 */
      { ico:'✓', th:'อนุมัติผลตรวจ', en:'Approve Inspection', cls:'success',
        act:'qcm-direct-approve', disabled: passRate < 100,
        disabledHintTh: `Pass Rate ${passRate}% · ยังไม่ครบ 100%`,
        disabledHintEn: `Pass Rate ${passRate}% · not yet 100%` },
      /* v45.0 — "ส่งกลับให้ตรวจซ้ำ" ถูกตัดออก · Reassign ยังคงเข้าได้จาก NCR Detail */
      { ico:'⚠', th:`ดู NCR (${t.ncrCount})`, en:`View NCR (${t.ncrCount})`, cls:'warn', goto:{tab:'ncr'} },
    ],
    inspector: [
      { ico:'📋', th:'เริ่มตรวจ Checklist', en:'Start Checklist', cls:'primary', goto:{screen:'checklist'} },
      { ico:'⚠', th:`ดู NCR (${t.ncrCount})`, en:`View NCR (${t.ncrCount})`, cls:'warn', goto:{tab:'ncr'} },
      { ico:'📍', th:'GPS Check-in', en:'GPS Check-in', cls:'ghost', toast:'GPS check-in สำเร็จ · 13.7245, 100.5340' },
      { ico:'❌', th:'ไม่สามารถตรวจได้', en:'Cannot Inspect', cls:'ghost', toast:'แจ้ง QC Manager แล้ว' },
    ],
    engineer: [
      /* v44.0 — เหลือปุ่มเดียว · "ส่งผลแก้ไข" ถูกตัดออก · Sub ต้องเข้า NCR Detail เพื่อแก้ทีละใบ */
      { ico:'⚠', th:`ดู NCR ที่ต้องแก้ (${t.ncrCount})`, en:`View NCR (${t.ncrCount})`, cls:'warn', goto:{tab:'ncr'} },
    ],
  };
  const actions = ROLE_ACTIONS[state.role] || [];

  return `
    <div class="info-card">
      <div class="head">
        <div class="code">${t.code}</div>
        <div class="name">${L(t.nameTh, t.nameEn)}</div>
        <div class="pills">
          <span class="state-badge ${t.state}">${stateLbl}</span>
          <span class="prio-badge ${t.priority}">${prioLbl}</span>
          ${t.ncrCount > 0 ? `<span style="padding:2px 8px;border-radius:99px;background:var(--error-soft);color:var(--error-dark);font-size:10px;font-weight:800">⚠ ${t.ncrCount} NCR</span>` : ''}
        </div>
      </div>
      <div class="body">
        <div class="kv-row"><span class="k">${L('โครงการ','Project')}</span><span class="v">Tarnas Tower</span></div>
        <div class="kv-row"><span class="k">${L('ไซต์/โซน','Site/Zone')}</span><span class="v mono">${L(t.zoneTh, t.zoneEn)}</span></div>
        <div class="kv-row"><span class="k">${L('WBS','WBS')}</span><span class="v">${L(t.wbsTh, t.wbsEn)}</span></div>
        <div class="kv-row"><span class="k">${L('Workflow','Workflow')}</span><span class="v">${L(t.workflowTh, t.workflowEn)}</span></div>
        <div class="kv-row"><span class="k">${L('Checklist','Checklist')}</span><span class="v">${t.checklist}</span></div>
        <div class="kv-row"><span class="k">${L('ผู้ตรวจ','Inspector')}</span><span class="v">${t.inspector}</span></div>
        <div class="kv-row"><span class="k">${L('ผู้แก้ไข','Field/Sub')}</span><span class="v">${t.owner}</span></div>
        <div class="kv-row"><span class="k">${L('วันที่กำหนดเสร็จ','Due date')}</span><span class="v ${t.dueIn<0?'':''}" style="color:${t.dueIn<0?'var(--error-dark)':'inherit'}">${t.dueIn < 0 ? L('เลยกำหนด','Overdue') : L('อีก ' + t.dueIn + ' วัน', t.dueIn + 'd left')}</span></div>
      </div>
    </div>

    <div class="stats-grid">
      <div class="stat-mini pass"><div class="v">${passCnt}</div><div class="l">${L('ผ่าน','Pass')}</div></div>
      <div class="stat-mini ncr"><div class="v">${t.ncrCount}</div><div class="l">NCR</div></div>
      <div class="stat-mini"><div class="v">${t.items}</div><div class="l">${L('รวม','Total')}</div></div>
      <div class="stat-mini"><div class="v">${passRate}%</div><div class="l">Pass Rate</div></div>
    </div>

    <div class="actions-row">
      ${actions.length === 0 ? `<div style="text-align:center;padding:16px;color:var(--muted);font-size:11px">${L('บทบาทนี้ไม่มี action โดยตรง','No direct actions')}</div>` : ''}
      ${actions.map((a, i) => {
        const lbl = L(a.th, a.en);
        /* v36.0 — respect a.disabled: skip goto/toast/act attrs so the button becomes inert */
        const isDisabled = !!a.disabled;
        const goto  = (!isDisabled && a.goto)  ? `data-goto='${JSON.stringify(a.goto)}'` : '';
        const toast = (!isDisabled && a.toast) ? `data-toast="${a.toast}"` : '';
        const act   = (!isDisabled && a.act)   ? `data-act="${a.act}"` : '';
        const disCls = isDisabled ? ' act-btn-disabled' : '';
        const hint = isDisabled ? (L(a.disabledHintTh || '', a.disabledHintEn || '')) : '';
        const hintHtml = hint ? `<span class="act-btn-hint">${hint}</span>` : '';
        return `<button class="act-btn ${a.cls}${disCls}" data-action="${i}" ${goto} ${toast} ${act}${isDisabled?' aria-disabled="true"':''}>${a.ico} ${lbl}${hintHtml}</button>`;
      }).join('')}
    </div>
  `;
}

function renderTabLifecycle(t){
  // 7-step QC standard workflow with current state
  const steps = [
    { id:1, name_th:'สร้าง Task', name_en:'Task Created', actor:'สน ป. (QCM)', when:'26 พ.ค. 08:00', state:'done', pill:'DRAFT' },
    { id:2, name_th:'มอบหมาย Inspector', name_en:'Assign Inspector', actor:'สน ป. → '+t.inspector, when:'26 พ.ค. 08:30', state:'done', pill:'ASSIGNED' },
    { id:3, name_th:'รับงาน + ตรวจ', name_en:'Receive & Inspect', actor:t.inspector, when:'29 พ.ค. 09:15 · GPS ✓', state: t.itemsDone > 0 ? 'done':'pending', pill:'IN_PROGRESS' },
    { id:4, name_th:'ส่งงาน + เซ็นรับรอง', name_en:'Submit + Sign', actor:t.inspector, when:'30 พ.ค. 16:30', state: ['review','ncr_open','ncr_verify','done'].includes(t.state)?'done':'pending', pill:'REVIEW' },
    { id:5, name_th:'ยืนยัน NCR + มอบหมายแก้', name_en:'Confirm NCR + Assign Fix', actor:'สน ป. (QCM)', when:'30 พ.ค. 17:00', state: ['ncr_open','ncr_verify','done'].includes(t.state) && t.ncrCount > 0 ?'done': (t.state === 'review' ? 'active' : 'pending'), pill:'NCR_OPEN' },
    { id:6, name_th:'Field/Sub กำลังแก้ไข', name_en:'Field/Sub Repairing', actor:t.owner, when: t.state === 'ncr_verify' ? L('แก้ไขแล้ว · รอตรวจซ้ำ','Repaired · awaiting verify') : (t.state === 'ncr_open' ? L('กำลังดำเนินการ','In progress') : L('รอ','Pending')), state: t.state==='ncr_verify' ? 'done' : (t.state === 'ncr_open' ? 'active' : 'pending'), pill:'NCR_VERIFY' },
    { id:7, name_th:'ตรวจซ้ำ + ปิด NCR', name_en:'Re-inspect + Close', actor:t.inspector, when: t.state==='ncr_verify'?L('รอ Inspector ตรวจซ้ำ','Awaiting Inspector') : t.state==='done' ? L('ปิดแล้ว','Closed') : L('รอ','Pending'), state: t.state === 'done' ? 'done' : (t.state==='ncr_verify' ? 'active' : 'pending'), pill:'DONE' },
  ];

  // v14.0 — Pill labels (TH per state.lang)
  const PILL_LABELS = {
    DRAFT:       ['ร่าง',       'DRAFT'],
    ASSIGNED:    ['มอบหมายแล้ว', 'ASSIGNED'],
    IN_PROGRESS: ['กำลังตรวจ',  'IN_PROGRESS'],
    REVIEW:      ['รออนุมัติ',   'REVIEW'],
    NCR_OPEN:    ['NCR เปิด',    'NCR_OPEN'],
    NCR_VERIFY:  ['ตรวจซ้ำ NCR', 'NCR_VERIFY'],
    DONE:        ['เสร็จแล้ว',   'DONE'],
  };
  const langIdx = state.lang === 'th' ? 0 : 1;

  return `
    <div class="timeline">
      ${steps.map(s => `<div class="tl-step ${s.state}">
        <div class="dot">${s.state==='done'?'✓':s.id}</div>
        <div class="body">
          <div class="name">${s.id}. ${L(s.name_th, s.name_en)}</div>
          <div class="meta"><b>${s.actor}</b> · ${s.when}</div>
          <span class="pill">${(PILL_LABELS[s.pill] && PILL_LABELS[s.pill][langIdx]) || s.pill}</span>
        </div>
      </div>`).join('')}
    </div>
  `;
}

function renderTabChecklist(t){
  const code = t.code;

  // Detailed checklist data per task (mirrors web v26.0 TmChecklistTabPaint/Pile/Mep)
  let sections = [];
  if(code === 'TQ-2026-050'){
    sections = [
      { code:'A', name_th:'งานเตรียมพื้นที่และฐานราก (Foundation Prep)', name_en:'Foundation Preparation', desc_th:'ตรวจการกำหนดตำแหน่งเสาเข็ม · ความลึก · Bearing Capacity Test · ระบบระบายน้ำ', desc_en:'Pile positioning · depth · bearing capacity · drainage', items:[
        { id:'q1', code:'P-A01', sev:'high', sevCode:'high', sevTh:'สูง', sevEn:'High', type_th:'ผ่าน/ไม่ผ่าน', type_en:'Pass/Fail', required:true, req_photo:true, label_th:'การกำหนดตำแหน่งเสาเข็มตรงตามแบบ', label_en:'Pile positioning matches drawing', help_th:'ตรวจ X/Y coord · เบี่ยงเบน ≤ 50 มม. · มยผ. 1501-51 §4.1', help_en:'X/Y coords · deviation ≤ 50mm · มยผ. 1501-51 §4.1', status:'pass', result_th:'เบี่ยงเบน 18 มม. (ในเกณฑ์)', result_en:'Deviation 18mm (in spec)', criteria_th:'≤ 50 มม.', criteria_en:'≤ 50mm', inspector_th:'ณรงค์ บุญมี', inspector_en:'Narong Boonmee', at:'2026-05-29 09:15', notes_th:'วัด total station · 24 ต้น · ค่าสูงสุด 18 มม.', notes_en:'Total station · 24 piles · max 18mm', photos:2 },
        { id:'q2', code:'P-A02', sev:'crit', sevCode:'critical', sevTh:'วิกฤต', sevEn:'Critical', type_th:'ผ่าน/ไม่ผ่าน', type_en:'Pass/Fail', required:true, req_photo:true, label_th:'ความลึกเสาเข็มถึงชั้นดินรับน้ำหนัก', label_en:'Pile depth to bearing soil layer', help_th:'≥ 18 ม. ตามแบบ · Soil Boring Log · มยผ. 1501-51 §4.3', help_en:'≥ 18m per drawing · Soil Boring Log', status:'pass', result_th:'เฉลี่ย 19.4 ม. (ทุกต้น ≥ 18 ม.)', result_en:'Avg 19.4m (all ≥ 18m)', criteria_th:'≥ 18 ม.', criteria_en:'≥ 18m', inspector_th:'ณรงค์ บุญมี', inspector_en:'Narong Boonmee', at:'2026-05-29 11:30', notes_th:'ตรวจ Pile Log ครบ 24 ต้น · ทุกต้นผ่าน', notes_en:'24 piles logged · all pass', photos:2 },
        { id:'q3', code:'P-A03', sev:'crit', sevCode:'critical', sevTh:'วิกฤต', sevEn:'Critical', type_th:'ทดสอบ', type_en:'Test', required:true, req_photo:true, label_th:'ผลทดสอบ Pile Load Test (Static / Dynamic) ผ่านเกณฑ์', label_en:'Pile Load Test (Static/Dynamic) passes', help_th:'≥ 1.5× working load · มยผ. 1501-51 §5.1', help_en:'≥ 1.5× WL · มยผ. 1501-51 §5.1', status:'fail', inspector_th:'ณรงค์ บุญมี', inspector_en:'Narong Boonmee', at:'2026-05-30 14:25', ncr:{id:'NCR-2026-0055', sev:'crit', sevCode:'critical', sevTh:'วิกฤต', sevEn:'Critical', title_th:'Pile Load Test ต้น P-12 ไม่ผ่าน · Settlement เกินกำหนด', title_en:'PLT P-12 failed · Settlement exceeds limit', desc_th:'Static PLT ที่ P-12 พบ Settlement 38 มม. ที่ 1.5× WL (เกิน 25 มม.) · ใต้ดิน 2 · แนะนำ Coring Test เพิ่ม', desc_en:'Static PLT on P-12: 38mm settlement at 1.5× WL (exceeds 25mm).', owner_th:'อภินยา วงศ์สุข (วิศวกร)', owner_en:'Apinya W. (Engineer)', due_th:'3 วัน · 2 มิ.ย. 17:00', due_en:'3d · Jun 2 17:00', photos:3} },
        { id:'q4', code:'P-A04', sev:'med', sevCode:'medium', sevTh:'กลาง', sevEn:'Medium', type_th:'ผ่าน/ไม่ผ่าน', type_en:'Pass/Fail', required:false, req_photo:false, label_th:'ระบบระบายน้ำรอบฐานรากเพียงพอ', label_en:'Drainage around foundation adequate', help_th:'ตรวจระบบ pumping · ระดับน้ำใต้ดิน · มยผ. 1501-51 §4.5', help_en:'Check pumping system · groundwater level', status:'pass', result_th:'ติดตั้ง pump 2 ตัว · ระดับน้ำลด 80 ซม.', result_en:'2 pumps · water dropped 80cm', criteria_th:'น้ำ ≤ ฐานราก', criteria_en:'Water ≤ footing', inspector_th:'ณรงค์ บุญมี', inspector_en:'Narong Boonmee', at:'2026-05-29 15:45', notes_th:'ระบบ pumping 24 ชม.', notes_en:'24h pumping', photos:1 },
      ]},
      { code:'B', name_th:'คุณภาพเสาเข็ม (Pile Quality)', name_en:'Pile Quality', desc_th:'ตรวจวัสดุ · เหล็กเสริม · Pile Integrity · เอกสารรับรอง', desc_en:'Material · rebar · pile integrity · documentation', items:[
        { id:'q5', code:'P-B01', sev:'crit', sevCode:'critical', sevTh:'วิกฤต', sevEn:'Critical', type_th:'ผ่าน/ไม่ผ่าน', type_en:'Pass/Fail', required:true, req_photo:true, label_th:'ขนาดและชนิดเหล็กในเสาเข็ม (DB/RB) ตรงตามแบบ', label_en:'Rebar size and type (DB/RB) per drawing', help_th:'DB20 หลัก 8 เส้น · RB9 ปลอก @20 ซม.', help_en:'DB20×8 main, RB9 ties @20cm', status:'pass', result_th:'DB20 × 8 + RB9 ปลอก @20 ซม. ✓', result_en:'DB20 × 8 + RB9 @20cm ✓', criteria_th:'ตรงตาม Shop Drawing', criteria_en:'Per shop drawing', inspector_th:'ณรงค์ บุญมี', inspector_en:'Narong Boonmee', at:'2026-05-29 13:20', notes_th:'ตรวจ 3 ต้น/วัน · ทุกต้นผ่าน', notes_en:'3 piles/day · all pass', photos:2 },
        { id:'q6', code:'P-B02', sev:'high', sevCode:'high', sevTh:'สูง', sevEn:'High', type_th:'ทดสอบ', type_en:'Test', required:true, req_photo:true, label_th:'ผลทดสอบ Pile Integrity (Seismic / PIT Test) ผ่านเกณฑ์', label_en:'Pile Integrity Test (PIT) passes', help_th:'ตรวจรอยร้าว / โพรง / ความสมบูรณ์ · มยผ. 1501-51 §5.4', help_en:'Check cracks/voids/integrity', status:'fail', inspector_th:'ณรงค์ บุญมี', inspector_en:'Narong Boonmee', at:'2026-05-30 16:10', ncr:{id:'NCR-2026-0056', sev:'high', sevCode:'high', sevTh:'สูง', sevEn:'High', title_th:'พบโพรง (Void) ในเสาเข็ม P-08 · ระดับ -6.5 ม.', title_en:'Void in pile P-08 at -6.5m', desc_th:'PIT Test ที่ P-08 พบ defect echo ที่ระดับ -6.5 ม. · คาดเป็นโพรง ~80×60 มม. · ต้อง Coring Test ยืนยัน', desc_en:'PIT Test on P-08: defect at -6.5m · suspected void ~80×60mm', owner_th:'ผรช.สมชาย จันทร์เพ็ญ', owner_en:'Foreman Somchai J.', due_th:'5 วัน · 4 มิ.ย. 17:00', due_en:'5d · Jun 4 17:00', photos:2} },
        { id:'q7', code:'P-B03', sev:'high', sevCode:'high', sevTh:'สูง', sevEn:'High', type_th:'เอกสาร', type_en:'Document', required:true, req_photo:false, label_th:'เอกสารใบรับรอง (Mill Certificate) เหล็กเสริม', label_en:'Mill Certificate for rebar', help_th:'ใบรับรองคุณสมบัติเหล็ก ครบทุก Lot · มอก. 24-2548', help_en:'Mill cert for every lot', status:'pass', result_th:'6 ใบ · ครบทุก lot', result_en:'6 certs · all lots', criteria_th:'ครบ 100%', criteria_en:'100% complete', inspector_th:'ณรงค์ บุญมี', inspector_en:'Narong Boonmee', at:'2026-05-28 10:00', notes_th:'แนบไฟล์ PDF ใน Audit Log', notes_en:'PDF in Audit Log', photos:0 },
      ]},
    ];
  } else if(code === 'TQ-2026-054'){
    sections = [
      { code:'A', name_th:'งานสี (Paint Quality)', name_en:'Paint Quality', desc_th:'ตรวจคุณภาพงานสี · ความเรียบ · ไม่มีรอยลูกกลิ้ง', desc_en:'Paint smoothness · no roller marks', items:[
        { id:'q1', code:'F-A01', sev:'high', sevCode:'high', sevTh:'สูง', sevEn:'High', type_th:'ตัวเลข', type_en:'Number', required:true, req_photo:false, label_th:'ค่าสีที่วัดได้ (ΔE)', label_en:'Measured color value (ΔE)', help_th:'ระบุค่าสีจากเครื่องวัด · ΔE ≤ 2.0', help_en:'Spectrometer reading · ΔE ≤ 2.0', status:'pass', result_th:'1.2 ΔE', result_en:'1.2 ΔE', criteria_th:'≤ 2.0 ΔE (ผ่าน)', criteria_en:'≤ 2.0 (pass)', inspector_th:'คิตติศักดิ์ ชัยวัฒน์', inspector_en:'Kittisak C.', at:'2026-06-16 14:25', notes_th:'วัดที่ผนัง W-A01 · 3 จุด · ค่าเฉลี่ย 1.2 ΔE', notes_en:'W-A01 · 3 points · avg 1.2 ΔE', photos:2 },
        { id:'q2', code:'F-A02', sev:'med', sevCode:'medium', sevTh:'กลาง', sevEn:'Medium', type_th:'รหัสสี', type_en:'Color', required:true, req_photo:false, label_th:'สีที่ใช้ทา (รหัส HEX)', label_en:'Applied color (HEX)', help_th:'ระบุรหัสสี HEX ตาม Spec', help_en:'HEX color per spec', status:'pass', result_th:'#F5F1E8', result_en:'#F5F1E8', criteria_th:'Spec: #F5F1E8 ± 0', criteria_en:'Spec: #F5F1E8 ± 0', inspector_th:'คิตติศักดิ์ ชัยวัฒน์', inspector_en:'Kittisak C.', at:'2026-06-16 14:30', notes_th:'ตรงตาม spec · ไม่มีการเบี่ยงเบน', notes_en:'Match spec · no deviation', photos:1 },
        { id:'q3', code:'F-A03', sev:'high', sevCode:'high', sevTh:'สูง', sevEn:'High', type_th:'ผ่าน/ไม่ผ่าน', type_en:'Pass/Fail', required:true, req_photo:true, label_th:'สีสม่ำเสมอ ไม่มีรอยลูกกลิ้งหรือไม่?', label_en:'Paint even, no roller marks?', help_th:'ตรวจสายตา 1 ม. ภายใต้แสงไฟ', help_en:'Visual check at 1m under spotlight', status:'fail', inspector_th:'คิตติศักดิ์ ชัยวัฒน์', inspector_en:'Kittisak C.', at:'2026-06-16 14:35', ncr:{id:'NCR-2026-0054', sev:'high', sevCode:'high', sevTh:'สูง', sevEn:'High', title_th:'พบรอยลูกกลิ้งที่ผนัง W-A02', title_en:'Roller marks at wall W-A02', desc_th:'ตรวจพบรอยลูกกลิ้งบริเวณผนัง W-A02 ขนาด 30×40 ซม. ที่ความสูง 1.5 ม. · ไม่ผ่านเกณฑ์ · ขัด + ทาสีทับใหม่ 2 ชั้น', desc_en:'Roller marks on W-A02 area 30×40cm at 1.5m · fail · sand + 2-coat repaint', owner_th:'ผรช.สมชาย จันทร์เพ็ญ', owner_en:'Foreman Somchai J.', due_th:'พรุ่งนี้ 17:00', due_en:'Tomorrow 17:00', photos:3} },
        { id:'q4', code:'F-A04', sev:'med', sevCode:'medium', sevTh:'กลาง', sevEn:'Medium', type_th:'รูปถ่าย', type_en:'Photo', required:true, req_photo:false, label_th:'รูปประกอบการตรวจ (ขั้นต่ำ 2 รูป)', label_en:'Inspection photos (min. 2)', help_th:'ถ่ายขั้นต่ำ 2 รูปต่อตำแหน่ง', help_en:'Min 2 photos per location', status:'pass', result_th:'2 รูป · 3.2 MB', result_en:'2 photos · 3.2 MB', inspector_th:'คิตติศักดิ์ ชัยวัฒน์', inspector_en:'Kittisak C.', at:'2026-06-16 14:40', notes_th:'จัดเก็บใน Cloud', notes_en:'Stored in Cloud', photos:2 },
      ]},
      { code:'B', name_th:'ความสะอาด (Cleanliness)', name_en:'Cleanliness', desc_th:'ตรวจการเก็บงานสะอาด ไม่มีคราบสี', desc_en:'Workspace cleanliness', items:[
        { id:'q5', code:'F-B01', sev:'med', sevCode:'medium', sevTh:'กลาง', sevEn:'Medium', type_th:'ผ่าน/ไม่ผ่าน', type_en:'Pass/Fail', required:true, req_photo:false, label_th:'พื้นที่ส่วนกลางสะอาด ไม่มีคราบสี', label_en:'Common areas clean', help_th:'ตรวจพื้น · ฝ้า · ราวบันได · กระจก', help_en:'Floor · ceiling · railing · glass', status:'pending' },
        { id:'q6', code:'F-B02', sev:'high', sevCode:'high', sevTh:'สูง', sevEn:'High', type_th:'ลายเซ็น', type_en:'Signature', required:true, req_photo:false, label_th:'ผู้ตรวจรับรอง', label_en:'Inspector acknowledgement', help_th:'เซ็นรับรองการตรวจเมื่อเสร็จ', help_en:'Sign upon completion', status:'pending' },
      ]},
    ];
  } else if(code === 'TQ-2026-056'){
    sections = [
      { code:'A', name_th:'ระบบจ่ายไฟ (Power Distribution)', name_en:'Power Distribution', desc_th:'ตรวจสายไฟ · Conduit · Breaker · Grounding · วสท. 3001-56', desc_en:'Wiring · conduit · breakers · grounding', items:[
        { id:'q1', code:'M-A01', sev:'crit', sevCode:'critical', sevTh:'วิกฤต', sevEn:'Critical', type_th:'ผ่าน/ไม่ผ่าน', type_en:'Pass/Fail', required:true, req_photo:true, label_th:'ขนาดสายไฟฟ้าถูกต้องตามแบบ THW/NYY มอก.', label_en:'Wire size THW/NYY · TIS standard', help_th:'THW 2.5/4/6 mm² ตาม load · มอก. 11-2553', help_en:'THW 2.5/4/6mm² per load', status:'pass', result_th:'THW 4 mm² · 12 วงจร', result_en:'THW 4mm² · 12 circuits', criteria_th:'ตาม Single Line Diagram', criteria_en:'Per single-line', inspector_th:'คิตติศักดิ์ ช.', inspector_en:'Kittisak C.', at:'2026-06-18 09:20', notes_th:'สุ่ม 4 จุด · ฉลากครบทุกเส้น', notes_en:'4 spot checks · all labeled', photos:2 },
        { id:'q2', code:'M-A02', sev:'high', sevCode:'high', sevTh:'สูง', sevEn:'High', type_th:'ผ่าน/ไม่ผ่าน', type_en:'Pass/Fail', required:true, req_photo:false, label_th:'เดินสายในท่อ Conduit ครบ ไม่มีรอยต่อในท่อ', label_en:'Wiring in conduit · no joints inside', help_th:'EMT/IMC · รอยต่อเฉพาะใน JB', help_en:'EMT/IMC · joints only in JB', status:'pass', result_th:'EMT 25 mm. · รอยต่อใน JB', result_en:'EMT 25mm · joints in JB', criteria_th:'ห้ามต่อกลางท่อ', criteria_en:'No mid-conduit joints', inspector_th:'คิตติศักดิ์ ช.', inspector_en:'Kittisak C.', at:'2026-06-18 10:45', notes_th:'ผ่านทุกจุด', notes_en:'All pass', photos:1 },
        { id:'q3', code:'M-A03', sev:'crit', sevCode:'critical', sevTh:'วิกฤต', sevEn:'Critical', type_th:'ตัวเลข', type_en:'Number', required:true, req_photo:true, label_th:'ขนาด Breaker/Fuse ป้องกันกระแสเกิน', label_en:'Breaker/Fuse size protects overcurrent', help_th:'Breaker ≤ 80% ของ wire ampacity · IEC 60898', help_en:'Breaker ≤ 80% ampacity · IEC 60898', status:'fail', inspector_th:'คิตติศักดิ์ ช.', inspector_en:'Kittisak C.', at:'2026-06-18 13:15', ncr:{id:'NCR-2026-0057', sev:'crit', sevCode:'critical', sevTh:'วิกฤต', sevEn:'Critical', title_th:'Breaker CB-09 ขนาด 32A เกินค่าที่คำนวณ (ควร 20A)', title_en:'Breaker CB-09 32A exceeds calc (20A)', desc_th:'AC ห้องเครื่อง MDB-2 ใช้ 32A กับสาย THW 4mm² · เสี่ยงไฟไหม้', desc_en:'AC at MDB-2 uses 32A with THW 4mm² · fire hazard', owner_th:'ผรช.อนุชา ไฟฟ้า', owner_en:'Foreman Anucha', due_th:'24 ชม. · พรุ่งนี้ 13:00', due_en:'24h · Tomorrow 13:00', photos:3} },
        { id:'q4', code:'M-A04', sev:'crit', sevCode:'critical', sevTh:'วิกฤต', sevEn:'Critical', type_th:'ตัวเลข', type_en:'Number', required:true, req_photo:true, label_th:'Grounding ≤ 5 Ω · ทดสอบแล้ว', label_en:'Grounding ≤ 5 Ω · tested', help_th:'Earth Tester ที่ Main Ground', help_en:'Earth Tester at Main Ground', status:'fail', inspector_th:'คิตติศักดิ์ ช.', inspector_en:'Kittisak C.', at:'2026-06-18 14:30', ncr:{id:'NCR-2026-0058', sev:'crit', sevCode:'critical', sevTh:'วิกฤต', sevEn:'Critical', title_th:'Grounding 8.2 Ω · เกิน 5 Ω', title_en:'Grounding 8.2 Ω · exceeds 5 Ω', desc_th:'Earth Tester วัดได้ 8.2 Ω · เกิน 5 Ω · ดินแห้ง + Ground Rod ตื้นไป (2.4 ม.)', desc_en:'Measured 8.2 Ω · dry soil + rod too shallow (2.4m)', owner_th:'ผรช.อนุชา ไฟฟ้า', owner_en:'Foreman Anucha', due_th:'3 วัน · 21 มิ.ย. 17:00', due_en:'3d · Jun 21 17:00', photos:2} },
      ]},
      { code:'B', name_th:'ระบบควบคุม + ความปลอดภัย', name_en:'Control & Safety', desc_th:'Insulation Test · เต้ารับ/สวิตช์ · ป้ายวงจร · ระบบฉุกเฉิน', desc_en:'Insulation · outlets · labels · emergency', items:[
        { id:'q5', code:'M-A05', sev:'crit', sevCode:'critical', sevTh:'วิกฤต', sevEn:'Critical', type_th:'ตัวเลข', type_en:'Number', required:true, req_photo:true, label_th:'Insulation Test (Megger) ≥ 1 MΩ ทุกวงจร', label_en:'Insulation Test (Megger) ≥ 1 MΩ', help_th:'500 VDC · ทุกวงจรก่อน energize', help_en:'500 VDC · all circuits', status:'pass', result_th:'ค่าต่ำสุด 124 MΩ', result_en:'Min 124 MΩ', criteria_th:'≥ 1 MΩ', criteria_en:'≥ 1 MΩ', inspector_th:'คิตติศักดิ์ ช.', inspector_en:'Kittisak C.', at:'2026-06-18 15:30', notes_th:'24 วงจร · ทุกค่า > 100 MΩ', notes_en:'24 circuits · all > 100 MΩ', photos:1 },
        { id:'q6', code:'M-A06', sev:'med', sevCode:'medium', sevTh:'กลาง', sevEn:'Medium', type_th:'ผ่าน/ไม่ผ่าน', type_en:'Pass/Fail', required:false, req_photo:false, label_th:'ตำแหน่งเต้ารับ/สวิตช์ (30/120 ซม.)', label_en:'Outlets/switches at 30/120cm', help_th:'เต้ารับ 30 cm. · สวิตช์ 120 cm.', help_en:'Outlets 30cm · switches 120cm', status:'pass', result_th:'ทุกจุด ±5 มม.', result_en:'All ±5mm', criteria_th:'±10 มม.', criteria_en:'±10mm', inspector_th:'คิตติศักดิ์ ช.', inspector_en:'Kittisak C.', at:'2026-06-18 16:00', notes_th:'วัด total station 18 จุด', notes_en:'18 points', photos:1 },
        { id:'q7', code:'M-A07', sev:'med', sevCode:'medium', sevTh:'กลาง', sevEn:'Medium', type_th:'ผ่าน/ไม่ผ่าน', type_en:'Pass/Fail', required:false, req_photo:false, label_th:'ป้ายชื่อวงจรใน MDB/DB ครบถ้วน', label_en:'Circuit labels in MDB/DB', help_th:'ป้ายอะคริลิคแกะสลัก', help_en:'Engraved acrylic plates', status:'pass', result_th:'ป้ายครบ 24/24 วงจร', result_en:'24/24 circuits labeled', criteria_th:'ครบ 100%', criteria_en:'100%', inspector_th:'คิตติศักดิ์ ช.', inspector_en:'Kittisak C.', at:'2026-06-18 16:45', photos:1 },
        { id:'q8', code:'M-A08', sev:'high', sevCode:'high', sevTh:'สูง', sevEn:'High', type_th:'ผ่าน/ไม่ผ่าน', type_en:'Pass/Fail', required:true, req_photo:false, label_th:'Emergency Power · Changeover ทดสอบแล้ว', label_en:'Emergency Power · Changeover tested', help_th:'ATS · เวลา switch ≤ 10 วินาที', help_en:'ATS · switch ≤ 10s', status:'pass', result_th:'ATS switch 4.2 วินาที ✓', result_en:'ATS switch 4.2s ✓', criteria_th:'≤ 10 วินาที', criteria_en:'≤ 10s', inspector_th:'คิตติศักดิ์ ช.', inspector_en:'Kittisak C.', at:'2026-06-18 17:15', notes_th:'Gen 250 kVA · ทดสอบ Black Start 3 ครั้ง', notes_en:'Gen 250kVA · 3× Black Start', photos:2 },
      ]},
    ];
  } else {
    // Generic
    sections = [
      { code:'A', name_th:'หมวด A · งานตรวจสอบทั่วไป', name_en:'Section A · General Inspection', desc_th:'รายการตรวจสอบของ task นี้', desc_en:'Inspection items for this task', items:[
        { id:'q1', code:'CK-01', sev:'med', sevCode:'medium', sevTh:'กลาง', sevEn:'Medium', type_th:'ผ่าน/ไม่ผ่าน', type_en:'Pass/Fail', required:true, req_photo:false, label_th:'รายการตรวจที่ 1', label_en:'Inspection item 1', help_th:'ตรวจสอบตามมาตรฐาน', help_en:'Check per standard', status:'pending' },
        { id:'q2', code:'CK-02', sev:'med', sevCode:'medium', sevTh:'กลาง', sevEn:'Medium', type_th:'ผ่าน/ไม่ผ่าน', type_en:'Pass/Fail', required:true, req_photo:false, label_th:'รายการตรวจที่ 2', label_en:'Inspection item 2', help_th:'ตรวจสอบตามมาตรฐาน', help_en:'Check per standard', status:'pending' },
      ]},
    ];
  }

  // Stats
  const allItems = sections.flatMap(s => s.items);
  const total = allItems.length;
  const passCount = allItems.filter(i => i.status === 'pass').length;
  const failCount = allItems.filter(i => i.status === 'fail').length;
  const pendingCount = allItems.filter(i => i.status === 'pending').length;

  // Default-expand any NCR items
  if(!state.cklExpanded) state.cklExpanded = new Set(allItems.filter(i => i.status === 'fail').map(i => i.id));

  const banner = state.role === 'inspector' && (t.state === 'in_progress' || t.state === 'ncr_verify')
    ? `<div class="gps-banner">📍 ${L(`GPS check-in: ${t.zoneTh} · 13.7245, 100.5340 ✓`, `GPS check-in: ${t.zoneEn} ✓`)}</div>`
    : '';

  const startBtn = state.role === 'inspector' && t.state !== 'done'
    ? `<div style="padding:10px 14px"><button class="act-btn primary" data-goto='{"screen":"checklist"}'>📋 ${L('เริ่มตรวจ Checklist','Start Checklist')}</button></div>`
    : '';

  // Stats header
  const statsHtml = `<div class="ckl-stats">
    <span class="cs-chip total"><span class="v">${total}</span> ${L('ข้อ','items')}</span>
    <span class="cs-chip pass"><span class="v">${passCount}</span> ✓ ${L('ผ่าน','pass')}</span>
    <span class="cs-chip fail"><span class="v">${failCount}</span> ⚠ NCR</span>
    <span class="cs-chip pending"><span class="v">${pendingCount}</span> ● ${L('รอ','pending')}</span>
  </div>`;

  return banner + startBtn + statsHtml + sections.map(s => `
    <div class="ckl-sec-v4">
      <div class="ckl-sec-head-v4">
        <span class="ckl-sec-num">${s.code}</span>
        <div class="ckl-sec-meta">
          <div class="ckl-sec-title">${L(s.name_th, s.name_en)}</div>
          <div class="ckl-sec-desc">${L(s.desc_th, s.desc_en)}</div>
        </div>
        <span class="ckl-sec-count">${s.items.length} ${L('รายการ','items')}</span>
      </div>
      ${s.items.map(it => {
        const isOpen = state.cklExpanded && state.cklExpanded.has(it.id);
        const statLbl = it.status === 'pass' ? L('ผ่าน','Pass') : it.status === 'fail' ? 'NCR' : L('รอตรวจ','Pending');
        const statIco = it.status === 'pass' ? '✓' : it.status === 'fail' ? '⚠' : '●';
        const sevLbl = L(it.sevTh, it.sevEn);
        const typeLbl = L(it.type_th, it.type_en);

        // Expanded body
        let body = '';
        if(isOpen){
          body = `<div class="ckl-item-body">
            <div class="ckl-row">
              <div class="k">${L('คำอธิบาย','Help')}</div>
              <div class="v">${L(it.help_th, it.help_en)}</div>
            </div>`;
          if(it.status === 'pass'){
            body += `<div class="ckl-row">
              <div class="k">${L('ผลที่วัดได้','Result')}</div>
              <div class="v in-spec"><span class="code">${L(it.result_th, it.result_en)}</span> ✓ ${L('ในเกณฑ์','In spec')}</div>
            </div>`;
            if(it.criteria_th){
              body += `<div class="ckl-row"><div class="k">${L('เกณฑ์','Criteria')}</div><div class="v">${L(it.criteria_th, it.criteria_en)}</div></div>`;
            }
            if(it.notes_th){
              body += `<div class="ckl-row"><div class="k">${L('หมายเหตุ','Notes')}</div><div class="v">${L(it.notes_th, it.notes_en)}</div></div>`;
            }
            body += `<div class="ckl-row"><div class="k">${L('ผู้ตรวจ','Inspector')}</div><div class="v">${L(it.inspector_th, it.inspector_en)} · ${it.at}</div></div>`;
            if(it.photos > 0){
              body += `<div class="ckl-row"><div class="k">📷 ${L('รูปแนบ','Photos')}</div><div class="ckl-photos">${Array.from({length:it.photos}).map(() => '<div class="thumb">🖼</div>').join('')}</div></div>`;
            }
          }
          if(it.status === 'fail' && it.ncr){
            const n = it.ncr;
            body += `<div class="ckl-ncr-box" data-goto='{"screen":"ncr","ncrId":"${n.id}"}'>
              <div class="ncr-bx-head">
                <span class="ico">🚨</span>
                <span class="id">${n.id}</span>
                <span class="sev-badge ${n.sev}">${L(n.sevTh, n.sevEn)}</span>
              </div>
              <div class="ncr-bx-title">${L(n.title_th, n.title_en)}</div>
              <div class="ncr-bx-grid">
                <div class="k">${L('รายละเอียด','Description')}</div>
                <div class="v">${L(n.desc_th, n.desc_en)}</div>
                <div class="k">${L('มอบหมาย','Owner')}</div>
                <div class="v">${L(n.owner_th, n.owner_en)}</div>
                <div class="k">${L('กำหนดแก้','Due')}</div>
                <div class="v">⏰ ${L(n.due_th, n.due_en)}</div>
                <div class="k">📷 ${L('รูปประกอบ','Photos')}</div>
                <div class="v">
                  <div class="ckl-photos" style="margin:0">${Array.from({length:n.photos}).map(() => '<div class="thumb">🖼</div>').join('')}</div>
                </div>
              </div>
              <button class="ncr-bx-link">${L('ดู NCR เต็ม','View NCR')} →</button>
            </div>
            <div class="ckl-row"><div class="k">${L('ผู้แจ้ง','Reported by')}</div><div class="v">${L(it.inspector_th, it.inspector_en)} · ${it.at}</div></div>`;
          }
          if(it.status === 'pending'){
            body += `<div class="ckl-row"><div class="k">${L('สถานะ','Status')}</div><div class="v" style="color:var(--warn-dark)">⏳ ${L('รอตรวจหน้างาน · ยังไม่มีการบันทึกผล','Pending field inspection')}</div></div>`;
          }
          body += `</div>`;
        }

        return `<div class="ckl-item-v4 ${isOpen ? 'expanded' : ''}" data-ckl-id="${it.id}">
          <div class="ckl-item-row-v4" data-ckl-toggle="${it.id}">
            <span class="code">${it.code}</span>
            <div class="text">
              <div class="ckl-item-label">${L(it.label_th, it.label_en)}</div>
              <div class="ckl-item-meta">
                <span class="sev-mini ${it.sevCode}">${sevLbl}</span>
                <span>· ${typeLbl}</span>
                ${it.required ? `<span>· ★ ${L('บังคับ','Required')}</span>` : ''}
                ${it.req_photo ? `<span>· 📷</span>` : ''}
              </div>
            </div>
            <span class="status-pill ${it.status}">${statIco} ${statLbl}</span>
            <button class="ckl-toggle" data-ckl-toggle="${it.id}">▼</button>
          </div>
          ${body}
        </div>`;
      }).join('')}
    </div>
  `).join('') + `<div style="height:80px"></div>`;
}

function renderTabNcr(t){
  if(t.ncrCount === 0){
    return `<div class="empty-stage" style="padding:40px 20px"><div class="ico">✓</div><div>${L('ไม่มี NCR ในงานนี้','No NCRs for this task')}</div></div>`;
  }
  const ncrs = t.ncrs.map(id => NCRS[id]).filter(n => n);
  /* v37.0 — Reassign button removed from NCR tab list · moved to NCR Detail page */
  return `<div class="ncr-list">
    ${ncrs.map(n => {
      const sev = n.sev === 'crit' ? '' : n.sev === 'high' ? 'high' : 'med';
      const sevLbl = SEV_LABEL[n.sev][state.lang === 'th' ? 0 : 1];
      const statLbl = NCR_STATUS_LABEL[n.status][state.lang === 'th' ? 0 : 1];
      return `<div class="ncr-item ${sev}">
        <div class="ncr-top">
          <span class="id">${n.id}</span>
          <span class="sev-badge ${n.sev}">${sevLbl}</span>
          <span class="state-badge ncr_${n.status}">${statLbl}</span>
        </div>
        <div class="ncr-title">${L(n.titleTh, n.titleEn)}</div>
        <div class="ncr-meta">
          <span>📋 ${n.item}</span>
          <span>👤 ${n.owner}</span>
          <span style="color:${n.due.includes('เลย')||n.due.includes('overdue')?'var(--error-dark)':'var(--warn-dark)'};font-weight:700">⏰ ${n.due}</span>
        </div>
        <button class="view-btn" data-goto='{"screen":"ncr","ncrId":"${n.id}"}'>${L('ดูรายละเอียด','View details')} →</button>
      </div>`;
    }).join('')}
  </div>`;
}

/* ============================================================
   v36.0 — INSPECTOR REASSIGN SCREEN
   Called from NCR tab (QCM only). Shows all QC Inspectors with
   their current workload (activeTasks · nextFree · overdue).
   Tapping an inspector reassigns the NCR, sets status=reinspect,
   sets parent task state=in_progress, then returns to NCR tab.
   ============================================================ */
function renderInspectorReassign(){
  const ncrId = state.reassignNcrId;
  const n = ncrId ? NCRS[ncrId] : null;
  const t = TASKS.find(x => x.code === state.taskCode);

  if(!n || !t) return `<div class="empty-stage">${L('ไม่พบข้อมูล NCR','NCR not found')}</div>`;

  const sevLbl = SEV_LABEL[n.sev][state.lang === 'th' ? 0 : 1];
  const list = (typeof CT_INSPECTORS !== 'undefined' && Array.isArray(CT_INSPECTORS)) ? CT_INSPECTORS : [];
  /* Sort: fewest activeTasks first (most available) */
  const sorted = list.slice().sort((a, b) => (a.activeTasks || 0) - (b.activeTasks || 0));

  const inspectorRow = (p) => {
    const wl = workloadLevel(p.activeTasks || 0);
    const wlLbl = wl === 'free' ? L('ว่างมาก','Free')
                : wl === 'med'  ? L('พอมี','Med')
                                : L('งานเยอะ','Busy');
    return `
      <div class="inp-item" data-act="pick-reassign-inspector" data-email="${p.email}">
        <div class="inp-avatar">${p.avatar || (p.name_en||'?').slice(0,2)}</div>
        <div class="inp-body">
          <div class="inp-name">${L(p.name_th, p.name_en)}</div>
          <div class="inp-role">${p.role || 'QC Inspector'}</div>
          <div class="inp-meta">
            <span>📋 ${p.activeTasks || 0} ${L('งาน','tasks')}</span>
            <span>🗓 ${L('ว่าง','free')} ${p.nextFree || '-'}</span>
            ${(p.overdue > 0) ? `<span class="over">⚠ ${L('เลย','overdue')} ${p.overdue}</span>` : ''}
          </div>
        </div>
        <div class="inp-wl">
          <div class="inp-wl-chip inp-wl-${wl}">${wlLbl}</div>
          <div class="inp-wl-n">${p.activeTasks || 0} ${L('งาน','tasks')}</div>
        </div>
      </div>`;
  };

  return `
    <div class="screen-head">
      <button class="back" data-act="back">←</button>
      <div class="title">
        <div class="t-main">${L('มอบหมาย QC Inspector ใหม่','Reassign QC Inspector')}</div>
        <div class="t-sub">${n.id} · ${t.code}</div>
      </div>
      <div class="head-act">
        <div class="lang-toggle">
          <button class="${state.lang==='th'?'on':''}" data-act="lang" data-val="th">TH</button>
          <button class="${state.lang==='en'?'on':''}" data-act="lang" data-val="en">EN</button>
        </div>
      </div>
    </div>

    <div class="inp-context-card">
      <div class="l">${L('มอบหมายงานตรวจซ้ำใหม่','Reassign re-inspection')}</div>
      <div class="v">${n.id} · ${L(n.titleTh, n.titleEn)}</div>
      <div class="sub">
        📋 ${n.item} · 🔥 ${sevLbl}<br/>
        ${L('เลือกผู้ตรวจสอบใหม่ · เรียงจากงานน้อยที่สุด','Pick new inspector · sorted by lowest workload')}
      </div>
    </div>

    <div class="inp-list">
      ${sorted.length === 0
        ? `<div class="empty-stage" style="padding:32px">${L('ไม่มี QC Inspector','No inspectors')}</div>`
        : sorted.map(inspectorRow).join('')}
    </div>
  `;
}

/* ============== v23.0 · Checklist Q/A helpers (rule chip + widgets) ============== */
function buildRuleChip(item){
  if(!item.ruleTh && !item.ruleEn) return '';
  const _L = (a,b) => state.lang === 'th' ? a : b;
  const sevLbl = item.sev ? SEV_LABEL[item.sev][state.lang==='th'?0:1] : '';
  const onFail = item.onFail;
  return `
    <div class="ckw-rule">
      <div class="ckw-rule-head">📏 ${_L('เกณฑ์การตรวจ','Inspection rule')}</div>
      <div class="ckw-rule-body">${_L(item.ruleTh || '', item.ruleEn || '')}</div>
      <div class="ckw-rule-meta">
        ${onFail === 'auto_ncr' ? `<span class="ckw-rule-chip ncr">⚠ ${_L('ตกเกณฑ์ → เปิด NCR อัตโนมัติ','Fail → auto-open NCR')}</span>` : ''}
        ${onFail === 'warn' ? `<span class="ckw-rule-chip warn">🔶 ${_L('ตกเกณฑ์ → เตือน','Fail → warn only')}</span>` : ''}
        ${item.sev ? `<span class="ckw-rule-chip ${item.sev}">${sevLbl}</span>` : ''}
      </div>
    </div>
  `;
}

function buildWidget(item, setVal){
  const _L = (a,b) => state.lang === 'th' ? a : b;
  const val = state.cklAnswers ? (state.cklAnswers[item.code] || '') : '';
  const type = item.type || 'passfail';
  switch(type){
    case 'passfail':
      return `<div class="pf-row">
        <button class="pf-btn pass${setVal==='pass'?' on':''}" data-pf="${item.code}|pass">✓ ${_L('ผ่าน','Pass')}</button>
        <button class="pf-btn fail${setVal==='fail'?' on':''}" data-pf="${item.code}|fail">✗ ${_L('ไม่ผ่าน','Fail')}</button>
      </div>`;
    case 'number':
      return `<div class="ckw-input-row">
        <input class="ckw-input" type="number" inputmode="decimal" step="any"
               value="${val}" placeholder="0"
               data-ckw-widget="number" data-code="${item.code}" />
        <span class="ckw-unit-chip">${item.unit || '—'}</span>
      </div>`;
    case 'text':
      return `<input class="ckw-input" value="${val}"
        placeholder="${_L('พิมพ์ที่นี่...','Type here...')}"
        data-ckw-widget="text" data-code="${item.code}" />`;
    case 'longtext':
      return `<textarea class="ckw-input" rows="3"
        placeholder="${_L('พิมพ์ที่นี่...','Type here...')}"
        data-ckw-widget="longtext" data-code="${item.code}">${val}</textarea>`;
    case 'date':
      return `<input class="ckw-input" type="date" value="${val}"
        data-ckw-widget="date" data-code="${item.code}" />`;
    case 'color':
      const clr = (val && /^#[0-9a-f]{3,6}$/i.test(val)) ? val : '#2BA8A2';
      return `<div class="ckw-color-row">
        <span class="ckw-color-chip" style="background:${clr}"></span>
        <input class="ckw-input" placeholder="#2BA8A2" value="${val}" maxlength="7"
          data-ckw-widget="color" data-code="${item.code}" />
      </div>`;
    case 'radio':
      return `<div class="ckw-choices">
        ${(item.options||[]).map((o, i) => `
          <label class="${val===String(i)?'on':''}">
            <input type="radio" name="qcw-r-${item.code}" value="${i}"${val===String(i)?' checked':''}
              data-ckw-widget="radio" data-code="${item.code}" />
            <span>${_L(o.th, o.en)}</span>
          </label>
        `).join('')}
      </div>`;
    case 'checkbox':
      const picked = Array.isArray(val) ? val : [];
      return `<div class="ckw-choices">
        ${(item.options||[]).map((o, i) => `
          <label class="${picked.includes(String(i))?'on':''}">
            <input type="checkbox" value="${i}"${picked.includes(String(i))?' checked':''}
              data-ckw-widget="checkbox" data-code="${item.code}" />
            <span>${_L(o.th, o.en)}</span>
          </label>
        `).join('')}
      </div>`;
    case 'photo':
      return `<div class="photo-row">
        ${val ? '<div class="photo-thumb">🖼</div>' : ''}
        <button class="photo-btn" data-ckw-widget="photo" data-code="${item.code}">
          <span class="ico">📸</span>${_L('ถ่ายรูป','Take photo')}
        </button>
      </div>`;
    case 'signature':
      return `<div class="ckw-sig${val?' signed':''}" data-ckw-widget="signature" data-code="${item.code}">
        ${val ? '✓ ' + _L('เซ็นแล้ว','Signed') : '✍ ' + _L('แตะเพื่อเซ็น','Tap to sign')}
      </div>`;
    default:
      return '';
  }
}

/* ============== CHECKLIST EXEC ============== */
function renderChecklistExec(){
  const t = TASKS.find(x => x.code === state.taskCode);
  if(!t) return '<div class="empty-stage">Task not found</div>';

  // v23.0 — Multi-type checklist · covers all widget types
  const ALL_ITEMS = [
    { code:'P-A01', sec:'A', secNameTh:'งานเตรียมพื้นที่และฐานราก', secNameEn:'Foundation Prep',
      type:'passfail', sev:'high',
      th:'การกำหนดตำแหน่งเสาเข็มตรงตามแบบ', en:'Pile positioning matches drawing',
      help_th:'ตรวจ X/Y coordinate ด้วย Total Station · มยผ. 1501-51 §4.1',
      help_en:'Check X/Y coords with Total Station · มยผ. 1501-51 §4.1',
      ruleTh:'ค่าเบี่ยงเบน ≤ 50 มม.', ruleEn:'Deviation ≤ 50 mm',
      onFail:'warn',
      defaultComment:'วัด total station 24 ต้น · ค่าสูงสุด 18 มม.' },
    { code:'P-A02', sec:'A', secNameTh:'งานเตรียมพื้นที่และฐานราก', secNameEn:'Foundation Prep',
      type:'number', unit:'ม.', sev:'crit',
      th:'ความลึกเสาเข็มถึงชั้นดินรับน้ำหนัก', en:'Pile depth to bearing soil',
      help_th:'อ่านค่าจาก Soil Boring Log · เกินเกณฑ์เปิด Auto-NCR',
      help_en:'Read from Soil Boring Log · out of range triggers auto-NCR',
      ruleTh:'x ≥ 18 ม.', ruleEn:'x ≥ 18 m',
      onFail:'auto_ncr',
      defaultComment:'เฉลี่ย 19.4 ม. (ทุกต้น ≥ 18 ม.)' },
    { code:'P-A03', sec:'A', secNameTh:'งานเตรียมพื้นที่และฐานราก', secNameEn:'Foundation Prep',
      type:'checkbox', sev:'high',
      th:'เอกสารประกอบก่อนเริ่มงานครบ (เลือกที่มี)', en:'Docs verified before start (check all present)',
      help_th:'ต้องมีครบทุกฉบับก่อนเริ่มตอกเสาเข็ม',
      help_en:'All docs must be present before start',
      ruleTh:'ครบทุกฉบับ', ruleEn:'All items present',
      options:[
        {th:'Soil Boring Log', en:'Soil Boring Log'},
        {th:'Pile Layout Drawing', en:'Pile Layout Drawing'},
        {th:'Bar Bending Schedule', en:'Bar Bending Schedule'},
        {th:'Method Statement', en:'Method Statement'}
      ],
      onFail:'warn',
      defaultComment:'มีครบทั้ง 4 ฉบับ' },
    { code:'P-A04', sec:'A', secNameTh:'งานเตรียมพื้นที่และฐานราก', secNameEn:'Foundation Prep',
      type:'photo', sev:'med',
      th:'แนบรูปประกอบสภาพพื้นที่และระบบระบายน้ำ', en:'Site & drainage condition photos',
      help_th:'ถ่ายอย่างน้อย 2 มุม · แสดงระดับน้ำใต้ดินและ pump',
      help_en:'At least 2 angles · show groundwater level + pump',
      ruleTh:'ต้องมีรูป ≥ 2 มุม', ruleEn:'At least 2 angles',
      defaultComment:'ติดตั้ง pump 2 ตัว · ระดับน้ำลด 80 ซม.' },

    { code:'P-B01', sec:'B', secNameTh:'คุณภาพเสาเข็ม', secNameEn:'Pile Quality',
      type:'radio', sev:'crit',
      th:'ประเภทเหล็กเสริมหลักในเสาเข็ม', en:'Main rebar type in pile',
      help_th:'เลือกประเภทที่พบ · เทียบกับแบบ',
      help_en:'Select type observed · compare with drawing',
      ruleTh:'ต้องเป็น DB20 × 8 เส้น + RB9 ปลอก', ruleEn:'Must be DB20×8 + RB9 ties',
      options:[
        {th:'DB20 × 8 + RB9 ปลอก (ตามแบบ)', en:'DB20×8 + RB9 ties (per drawing)'},
        {th:'DB25 × 8 + RB9 ปลอก (ใหญ่กว่า)', en:'DB25×8 + RB9 ties (larger)'},
        {th:'DB16 × 8 (เล็กกว่า)', en:'DB16×8 (smaller)'},
        {th:'อื่นๆ · ไม่ตรงแบบ', en:'Other · non-conforming'}
      ],
      onFail:'auto_ncr',
      defaultComment:'DB20 × 8 + RB9 ปลอก ✓' },
    { code:'P-B02', sec:'B', secNameTh:'คุณภาพเสาเข็ม', secNameEn:'Pile Quality',
      type:'number', unit:'kN', sev:'crit',
      th:'ผลทดสอบ Pile Load Test (Working Load)', en:'Pile Load Test (Working Load)',
      help_th:'ต้อง ≥ 1.5× Working Load · มยผ. 1501-51 §5.1',
      help_en:'Must be ≥ 1.5× Working Load · มยผ. 1501-51 §5.1',
      ruleTh:'x ≥ 1.5 × WL', ruleEn:'x ≥ 1.5 × WL',
      onFail:'auto_ncr',
      defaultComment:'' },
    { code:'P-B03', sec:'B', secNameTh:'คุณภาพเสาเข็ม', secNameEn:'Pile Quality',
      type:'date', sev:'high',
      th:'วันที่ทดสอบ PIT (Pile Integrity Test)', en:'PIT test date',
      help_th:'บันทึกวันที่ล่าสุด · ใช้อ้างอิงในรายงาน',
      help_en:'Log latest date · reference for report',
      ruleTh:'ต้องภายใน 30 วันก่อนตรวจรับ', ruleEn:'Within 30 days before acceptance',
      defaultComment:'' },

    { code:'P-C01', sec:'C', secNameTh:'การตรวจรับงาน', secNameEn:'Acceptance',
      type:'longtext', sev:'med',
      th:'บันทึกข้อสังเกตและข้อเสนอแนะ', en:'Observations & recommendations',
      help_th:'ระบุประเด็นที่พบ · แนวทางแก้ไข',
      help_en:'Note issues found · suggested actions',
      ruleTh:'ระบุอย่างละเอียด', ruleEn:'Detail all findings',
      defaultComment:'ทุกจุดตรวจผ่าน · ไม่มีข้อสังเกตพิเศษ' },
    { code:'P-C02', sec:'C', secNameTh:'การตรวจรับงาน', secNameEn:'Acceptance',
      type:'signature', sev:'high',
      th:'ผู้ตรวจ (QC Inspector) ลงลายเซ็นรับรอง', en:'QC Inspector must sign to certify',
      help_th:'ลายเซ็นเป็นหลักฐาน · ส่งให้ QC Manager ตรวจทาน',
      help_en:'Signature = proof · sent to QC Manager for review',
      ruleTh:'ต้องเซ็นก่อนส่งผล', ruleEn:'Must sign before submit',
      defaultComment:'' }
  ];

  // Init state
  if(!state.cklSet) state.cklSet = {};
  if(!state.cklComments) state.cklComments = {};
  if(state.cklIdx == null) state.cklIdx = 0;
  if(state.ckSectionIdx == null) state.ckSectionIdx = 0;
  if(!state.cklAnswers) state.cklAnswers = {};
  state._lastAllItems = ALL_ITEMS; // v21.0 · so nav handler knows section sizes

  // v22.0 · pre-compute counts for header + completion check
  const _passedCount = ALL_ITEMS.filter(i => state.cklSet[i.code] === 'pass').length;
  const _failedCount = ALL_ITEMS.filter(i => state.cklSet[i.code] === 'fail').length;
  const _skippedCount = ALL_ITEMS.filter(i => state.cklSet[i.code] === 'skip').length;
  const _inspectedCount = _passedCount + _failedCount + _skippedCount;
  const _total = ALL_ITEMS.length;
  const _remainingCount = _total - _inspectedCount;

  // Header (shared)
  const headerHtml = `
    <div class="screen-head">
      <button class="back" data-act="back">←</button>
      <div class="title">
        <div class="t-main">${L(t.nameTh, t.nameEn)}</div>
        <div class="t-sub">${t.code} · ${L('ตรวจแล้ว','Inspected')} ${_inspectedCount}/${_total}</div>
      </div>
      <div class="head-act">
        <div class="lang-toggle">
          <button class="${state.lang==='th'?'on':''}" data-act="lang" data-val="th">🇹🇭</button>
          <button class="${state.lang==='en'?'on':''}" data-act="lang" data-val="en">🇬🇧</button>
        </div>
      </div>
    </div>
    <div class="gps-banner">📍 ${L(`GPS check-in: ${t.zoneTh} · 13.7245, 100.5340 ✓`, `GPS check-in: ${t.zoneEn} ✓`)}</div>
  `;

  // === Completion screen — all items inspected ===
  if(_remainingCount === 0){
    state.currentItemCode = null;
    return headerHtml + `
      <div class="ckw-done-card">
        <div class="ico">${_failedCount > 0 ? '⚠' : '🎉'}</div>
        <div class="title">${L('ตรวจครบทุกรายการแล้ว','All items inspected')}</div>
        <div class="desc">${_failedCount > 0
          ? L(`พบ ${_failedCount} รายการไม่ผ่าน · ส่งผลให้ QC Manager ตรวจทาน · NCR ที่สร้างจะส่งให้ Field/Sub ดำเนินการต่อ`, `${_failedCount} item(s) failed · submit for QC Manager review · NCRs will be sent to Field/Sub`)
          : L('ตรวจครบทุกรายการเรียบร้อย · ส่งผลและเซ็นรับรองเพื่อให้ QC Manager ตรวจทาน','Inspection complete · ready to submit + sign')}</div>
        <div class="meta-list">
          <div class="row"><span>${L('รายการทั้งหมด','Total items')}</span><b>${_total}</b></div>
          <div class="row"><span>${L('ผ่าน','Passed')}</span><b style="color:var(--success-dark)">✓ ${_passedCount}</b></div>
          <div class="row"><span>${L('ไม่ผ่าน (NCR)','Failed (NCR)')}</span><b style="color:var(--error-dark)">⚠ ${_failedCount}</b></div>
          <div class="row"><span>${L('Task','Task')}</span><b>${t.code}</b></div>
          <div class="row"><span>${L('ผู้ตรวจ','Inspector')}</span><b>${t.inspector}</b></div>
        </div>
      </div>
      <div style="height:90px"></div>
      <div class="ckw-nav">
        <button class="btn-submit" data-ckw-nav="submit" style="flex:1">✓ ${L('ส่งผลการตรวจ + เซ็นรับรอง','Submit + Sign')}</button>
      </div>
    `;
  }

  // v20.0 — Show ALL items · no filtering · ✓ badge pinned across nav
  const visible = ALL_ITEMS;  // keep var name for minimal diff
  const total = ALL_ITEMS.length;
  const passedCount  = ALL_ITEMS.filter(i => state.cklSet[i.code] === 'pass').length;
  const failedCount  = ALL_ITEMS.filter(i => state.cklSet[i.code] === 'fail').length;
  const skippedCount = ALL_ITEMS.filter(i => state.cklSet[i.code] === 'skip').length;
  const inspectedCount = passedCount + failedCount + skippedCount;
  const remainingCount = total - inspectedCount;
  const overallPct = Math.round(inspectedCount / total * 100);

  // v21.0 — Group items into sections (in insertion order)
  const SECTIONS = [];
  const secIdxMap = {};
  ALL_ITEMS.forEach(it => {
    if(!(it.sec in secIdxMap)){
      secIdxMap[it.sec] = SECTIONS.length;
      SECTIONS.push({ key:it.sec, nameTh:it.secNameTh, nameEn:it.secNameEn, items:[] });
    }
    SECTIONS[secIdxMap[it.sec]].items.push(it);
  });
  const secCount = SECTIONS.length;
  // Bounds
  const secIdx = Math.max(0, Math.min(state.ckSectionIdx, secCount - 1));
  if(secIdx !== state.ckSectionIdx) state.ckSectionIdx = secIdx;
  const curSection = SECTIONS[secIdx];
  const curItems = curSection.items;
  const stepIdx = Math.max(0, Math.min(state.cklIdx, curItems.length - 1));
  if(stepIdx !== state.cklIdx) state.cklIdx = stepIdx;
  const item = curItems[stepIdx];
  state.currentItemCode = item.code;
  const setVal = state.cklSet[item.code] || null;
  const comment = (state.cklComments[item.code] !== undefined ? state.cklComments[item.code] : item.defaultComment) || '';
  const photoCount = setVal ? 2 : 0;
  const isLastInSection = stepIdx === curItems.length - 1;
  const isLastSection = secIdx === secCount - 1;
  const isFinal = isLastInSection && isLastSection;

  // v20.0 — Build stepper dots for CURRENT SECTION · yellow ✓ badge pinned on inspected
  const CHECK_SVG = '<span class="ckw-check-badge" aria-label="inspected">'
    + '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>'
    + '</span>';
  const dots = curItems.map((it, i) => {
    const v = state.cklSet[it.code];
    let cls = '';
    if(i === stepIdx) cls += ' current';
    if(v === 'pass')      cls += ' done';
    else if(v === 'fail') cls += ' done fail';
    else if(v === 'skip') cls += ' done skip';
    else if(v)            cls += ' done';   // v23.0 · other widget types
    const badge = v ? CHECK_SVG : '';        // v23.0 · badge on any answer
    return `<button class="ckw-dot${cls}" data-ckw-jump="${i}" title="${it.code}">${i+1}${badge}</button>`;
  }).join('');

  // v21.0 — Tab strip
  const tabsHtml = `
    <div class="ckw-tabs" role="tablist">
      ${SECTIONS.map((s, i) => {
        const secAnswered = s.items.filter(x => state.cklSet[x.code]).length;
        return `<button class="ckw-tab${i===secIdx?' on':''}" data-ckw-tab="${i}" role="tab" aria-selected="${i===secIdx}">
          <span class="ckw-tab-n">${s.key}</span>
          <span>${L(s.nameTh, s.nameEn)}</span>
          <span class="ckw-tab-count">· ${secAnswered}/${s.items.length}</span>
        </button>`;
      }).join('')}
    </div>
  `;

  return headerHtml + tabsHtml + `
    <div class="ckw-stepper-wrap">
      <div class="ckw-stepper-info">
        <span>${L('หมวด','Section')} ${curSection.key} · ${L(curSection.nameTh, curSection.nameEn)}</span>
        <span><b style="color:var(--teal-dark)">${overallPct}%</b></span>
      </div>
      <div class="ckw-stepper">${dots}</div>
      <div class="ckw-prog-bar"><i style="width:${overallPct}%"></i></div>
    </div>

    <div class="ckw-card">
      <div class="item-no">${L('รายการที่','Item')} ${stepIdx+1} ${L('จาก','of')} ${curItems.length} · ${L('รวมทั้ง Checklist','Total')} ${inspectedCount}/${total}</div>
      <div class="ck-top">
        <span class="code">${item.code}</span>
        <span class="sev ${item.sev}">${SEV_LABEL[item.sev][state.lang==='th'?0:1]}</span>
        <span class="req">★ ${L('บังคับ','Required')}</span>
      </div>
      <div class="ck-q">${L(item.th, item.en)}</div>
      <div class="ck-help">💡 ${L(item.help_th, item.help_en)}</div>
      ${buildRuleChip(item)}
      <div class="ckw-widget-label">${L('คำตอบ','Answer')} <span class="req-star">★</span></div>
      ${buildWidget(item, setVal)}

      <div class="req-label">📷 ${L('แนบรูปประกอบ','Photos')} <span class="req-star">★</span></div>
      <div class="photo-row">
        ${Array.from({length: photoCount}).map(() => '<div class="photo-thumb">🖼</div>').join('')}
        <button class="photo-btn"><span class="ico">📸</span>${L('ถ่าย','Add')}</button>
      </div>

      <div class="req-label">💬 Comment <span class="req-star">★</span></div>
      <textarea class="ck-comment" id="ckw-comment" placeholder="${L('กรอกผลการตรวจ...','Enter result...')}">${comment}</textarea>
    </div>

    <div style="height:90px"></div>

    <div class="ckw-nav">
      <button class="btn-prev" data-ckw-nav="prev"${(stepIdx===0 && secIdx===0)?' disabled':''}>← ${L('ย้อนกลับ','Previous')}</button>
      ${isFinal
        ? `<button class="btn-submit" data-ckw-nav="submit">✓ ${L('ส่งผลการตรวจ + เซ็นรับรอง','Submit + Sign')}</button>`
        : `<button class="btn-next" data-ckw-nav="next">${L('ถัดไป','Next')} →</button>`}
    </div>

    ${state.ncrConfirm ? renderNcrConfirmOverlay() : ''}
  `;
}

// v17.0 — Confirm dialog before creating NCR (when user clicks 'ไม่ผ่าน')
function renderNcrConfirmOverlay(){
  const c = state.ncrConfirm;
  if(!c) return '';
  return `
    <div class="ncr-confirm-overlay">
      <div class="ncr-confirm-card">
        <div class="ncr-confirm-ico">⚠</div>
        <div class="ncr-confirm-title">${L('ยืนยันการสร้าง NCR?','Create NCR?')}</div>
        <div class="ncr-confirm-desc">${L(
          'รายการตรวจนี้ถูกบันทึกเป็น "ไม่ผ่าน" และจะสร้าง NCR เพื่อส่งให้ Field/Sub ดำเนินการแก้ไข',
          'This item will be marked as "Fail" and a new NCR will be created and sent to Field/Sub for remediation.')}</div>
        <div class="ncr-confirm-context">
          <span class="label">${L('รายการ','Item')}</span>
          <span class="val">${c.code} · ${c.label}</span>
        </div>
        <div class="ncr-confirm-actions">
          <button class="cancel" data-ncr-cfm="cancel">${L('ยกเลิก','Cancel')}</button>
          <button class="confirm" data-ncr-cfm="confirm">${L('ยืนยัน · สร้าง NCR','Confirm · Create NCR')}</button>
        </div>
      </div>
    </div>
  `;
}

// v24.0 — Sync Create form text inputs into state before re-render
function syncCreateFormInputs(){
  const code = document.getElementById('ct-code');
  const name = document.getElementById('ct-name');
  const desc = document.getElementById('ct-desc');
  if(!state.createForm) return;
  if(code && state.createForm.codeMode === 'manual') state.createForm.code = code.value;
  if(name) state.createForm.name = name.value;
  if(desc) state.createForm.description = desc.value;
}

// v15.0 — Sync the current comment textarea into state before re-render
// Uses state.currentItemCode (set by renderChecklistExec) — robust to filtering
function ckwSyncComment(){
  const item = state.currentItemCode;
  const el = document.getElementById('ckw-comment');
  if(el && item){
    if(!state.cklComments) state.cklComments = {};
    state.cklComments[item] = el.value;
  }
}

/* ============== NCR DETAIL ============== */
/* ============== NCR DETAIL ============== */
function renderNcrDetail(){
  const n = NCRS[state.ncrId];
  if(!n) return '<div class="empty-stage">NCR not found</div>';
  const sevLbl = SEV_LABEL[n.sev][state.lang === 'th' ? 0 : 1];
  const statLbl = NCR_STATUS_LABEL[n.status][state.lang === 'th' ? 0 : 1];

  // Workflow steps
  const wfSteps = [
    { id:1, name:L('1. แจ้ง NCR','1. Reported'), actor:n.inspector, at:'2026-06-16 14:35', stat:'done' },
    { id:2, name:L('2. มอบหมาย Field','2. Assigned'), actor:'สน ป. (QCM)', at:'2026-06-16 15:10', stat:'done' },
    { id:3, name:L('3. แก้ไขโดยช่าง','3. In Repair'), actor:n.owner, at: n.status==='open'?L('กำลังดำเนินการ','In progress') : (n.status==='verify'?'2026-06-18 11:00':L('เสร็จ','Done')), stat: n.status==='open'?'active':'done' },
    { id:4, name:L('4. รอตรวจซ้ำ','4. Re-inspect'), actor:n.inspector, at: n.status==='verify'?L('กำลังตรวจ','In review') : n.status==='closed'?L('ผ่าน','Pass'):L('รอ','Pending'), stat: n.status==='verify'?'active':(n.status==='closed'?'done':'') },
    { id:5, name:L('5. ปิด NCR','5. Close NCR'), actor:'สน ป. (QCM)', at: n.status==='closed'?L('ปิดแล้ว','Closed'):L('รอ','Pending'), stat: n.status==='closed'?'done':'' },
  ];

  // Role-based action buttons
  let actionBtns = '';
  if(state.role === 'inspector' && n.status === 'verify'){
    actionBtns = `<div class="a-row">
      <button class="a-btn fail" data-act="ncr-reject">✗ ${L('ไม่ผ่าน','Fail')}</button>
      <button class="a-btn pass" data-act="ncr-pass">✓ ${L('ผ่าน · ปิด NCR','Pass · Close')}</button>
    </div>`;
  } else if(state.role === 'engineer' && (n.status === 'open' || n.status === 'fixing')){
    /* v44.0 — rename "ส่งผลการแก้ไข" → "แก้ไข NCR" · icon 📤 → 📝 · same submit-screen flow */
    actionBtns = `<div class="a-row">
      <button class="a-btn primary" data-goto='{"screen":"submit","ncrId":"${n.id}"}'>📝 ${L('แก้ไข NCR','Edit NCR')}</button>
    </div>`;
  } else if(state.role === 'qcm'){
    /* v42.0 — Single combined button opens Edit+Reassign Modal (3 sections) */
    actionBtns = `<div class="a-row">
      <button class="a-btn primary" data-act="open-edit-ncr-modal" data-ncr="${n.id}" style="flex:1">
        📝 ${L('แก้ไข + มอบหมายใหม่','Edit + Reassign')}
      </button>
    </div>`;
  } else if(state.role === 'pm'){
    actionBtns = `<div class="a-row">
      <button class="a-btn fail" data-toast="ส่ง Escalation แล้ว · CEO ได้รับ Notification">⚠ ${L('Escalate ไป CEO','Escalate')}</button>
    </div>`;
  }

  return `
    <div class="screen-head">
      <button class="back" data-act="back">←</button>
      <div class="title">
        <div class="t-main">NCR Detail</div>
        <div class="t-sub">${n.id}</div>
      </div>
      <div class="head-act">
        <div class="lang-toggle">
          <button class="${state.lang==='th'?'on':''}" data-act="lang" data-val="th">🇹🇭</button>
          <button class="${state.lang==='en'?'on':''}" data-act="lang" data-val="en">🇬🇧</button>
        </div>
      </div>
    </div>

    <div class="ncrm-h">
      <span class="icon">🚨</span>
      <span class="id">${n.id}</span>
      <span class="sev-badge ${n.sev}">${sevLbl}</span>
      <span class="state-badge ncr_${n.status}">${statLbl}</span>
      ${n.stopWork && n.status!=='closed' ? `<span class="sw">🛑 STOP-WORK</span>` : ''}
    </div>

    <div class="sec">
      <h4>🔗 ${L('ข้อมูลอ้างอิง','Reference Info')}</h4>
      <div class="kv">
        <div class="k">${L('โครงการ','Project')}</div>
        <div class="v">Tarnas Tower</div>
        <div class="k">Site/Zone</div>
        <div class="v mono">${L(n.locTh, n.locEn)}</div>
        <div class="k">Task</div>
        <div class="v linkable">${n.taskCode}</div>
        <div class="k">${L('จาก Checklist','From Checklist')}</div>
        <div class="v"><b>${n.item}</b></div>
        <div class="k">${L('ผู้แจ้ง','Reported by')}</div>
        <div class="v">${n.inspector} (QC Inspector)</div>
      </div>
    </div>

    <div class="sec">
      <h4>📋 ${L('รายละเอียดข้อบกพร่อง','Defect Details')}</h4>
      <div class="defect-title">${L(n.titleTh, n.titleEn)}</div>
      <div class="defect-desc">${L(n.descTh, n.descEn)}</div>
      <div class="kv">
        <div class="k">${L('ขนาด','Size')}</div>
        <div class="v">${L(n.sizeTh, n.sizeEn)}</div>
        <div class="k">${L('ตำแหน่ง','Location')}</div>
        <div class="v">${L(n.locTh, n.locEn)}</div>
        <div class="k">${L('มาตรฐาน','Standard')}</div>
        <div class="v mono">${n.std}</div>
      </div>

      <h4 style="margin-top:12px">📷 ${L('รูปประกอบ (ก่อน/หลัง)','Photos (Before/After)')}</h4>
      ${(() => {
        // v46.0 — paired-row layout · photo[i] before aligns with photo[i] after
        const bC = n.before || 0, aC = n.after || 0, rows = Math.max(bC, aC);
        if(rows === 0){
          return `<div class="ph-pair-empty-all">${L('ยังไม่มีรูปประกอบ Before / After','No Before / After photos yet')}</div>`;
        }
        const pairRows = Array.from({length: rows}).map((_,i) => {
          const beforeCell = i < bC
            ? `<div class="ph-pair-cell before"><div class="ph" data-tag="${L('ก่อน','B')} ${i+1}">🖼</div><div class="cap">${L('คู่ที่ ','Pair ')}${i+1}</div></div>`
            : `<div class="ph-pair-cell empty"><div class="ph-slot">📷</div><div class="cap-empty">${L('ไม่มีรูป Before','No Before')}</div></div>`;
          const afterCell = i < aC
            ? `<div class="ph-pair-cell after"><div class="ph" data-tag="${L('หลัง','A')} ${i+1}">🖼</div><div class="cap">${L('คู่ที่ ','Pair ')}${i+1}</div></div>`
            : `<div class="ph-pair-cell empty"><div class="ph-slot">📷</div><div class="cap-empty">${L('รอถ่ายหลังแก้','Awaiting After')}</div></div>`;
          return `<div class="ph-pair-row">${beforeCell}<div class="compare-arrow">→</div>${afterCell}</div>`;
        }).join('');
        return `
          <div class="ph-pair-wrap">
            <div class="ph-pair-head">
              <div class="ph-h before"><span>${L('ก่อนแก้','Before')}</span><span class="cnt">${bC}</span></div>
              <div class="ph-gap"></div>
              <div class="ph-h after"><span>${L('หลังแก้','After')}</span><span class="cnt">${aC}</span></div>
            </div>
            <div class="ph-pair-rows">${pairRows}</div>
          </div>`;
      })()}
    </div>

    <div class="sec">
      <h4>🔍 ${L('สาเหตุ (Root Cause)','Root Cause')}</h4>
      <div class="rootcause-box">${L(n.rootCauseTh, n.rootCauseEn)}</div>
    </div>

    <div class="sec">
      <h4>🛠️ ${L('แนวทางแก้ไข','Corrective Action')}</h4>
      <pre class="corr-pre">${L(n.correctTh, n.correctEn)}</pre>
      <div class="kv">
        <div class="k">${L('มอบหมาย','Owner')}</div>
        <div class="v">${n.owner}</div>
        <div class="k">${L('กำหนดแก้','Due')}</div>
        <div class="v" style="color:var(--warn-dark)">${n.due}</div>
      </div>
    </div>

    <div class="sec">
      <h4>📊 ${L('ลำดับขั้น NCR','NCR Workflow')}</h4>
      ${wfSteps.map(s => `<div class="wf-step ${s.stat}">
        <div class="num">${s.stat==='done'?'✓':s.id}</div>
        <div>
          <div class="name">${s.name}</div>
          <div class="meta">${s.actor} · ${s.at}</div>
        </div>
        <span class="stat">${s.stat==='done'?L('เสร็จ','Done'):s.stat==='active'?L('กำลังทำ','Active'):L('รอ','Pending')}</span>
      </div>`).join('')}
    </div>

    <div style="height:120px"></div>

    <div class="action-bar">
      <div class="sla">📌 SLA: ${n.sla} · ${L('มาตรฐาน','Standard')}: ${n.std}</div>
      ${actionBtns || `<div class="a-row"><button class="a-btn ghost" data-act="back">${L('กลับ','Back')}</button></div>`}
    </div>
  `;
}

/* ============== NCR SUBMIT (Field/Sub) ============== */
function renderNcrSubmit(){
  const n = NCRS[state.ncrId] || NCRS["NCR-2026-0058"];
  return `
    <div class="screen-head">
      <button class="back" data-act="back">←</button>
      <div class="title">
        <div class="t-main">${L('ส่งผลการแก้ไข','Submit Resolution')}</div>
        <div class="t-sub">${n.id}</div>
      </div>
    </div>

    <div class="info-strip">
      <span class="ico">🚨</span>
      <div>
        <div class="id">${n.id} · <span class="sev-badge ${n.sev}">${SEV_LABEL[n.sev][state.lang==='th'?0:1]}</span></div>
        <div class="title">${L(n.titleTh, n.titleEn)}</div>
      </div>
    </div>

    <div class="form-sec">
      <h4>🔗 ${L('ข้อมูลอ้างอิง','Reference')}</h4>
      <div class="kv-row"><span class="k">Task</span><span class="v linkable" data-goto='{"screen":"detail","taskCode":"${n.taskCode}"}'>${n.taskCode}</span></div>
      <div class="kv-row"><span class="k">${L('ผู้แจ้ง','Reported')}</span><span class="v">${n.inspector}</span></div>
      <div class="kv-row"><span class="k">${L('กำหนดแก้','Due')}</span><span class="v" style="color:var(--warn-dark)">${n.due}</span></div>
    </div>

    <div class="form-sec">
      <h4>📷 ${L('รูปก่อนแก้ไข','Before Photos')}</h4>
      <div class="ph-list">
        ${Array.from({length: n.before}).map(()=>'<div class="ph-thumb before">🖼</div>').join('')}
      </div>
    </div>

    <div class="form-sec">
      <h4>📸 ${L('รูปหลังแก้ไข','After Photos')} <span style="color:var(--error)">★</span></h4>
      <div style="font-size:11px;color:var(--muted);margin-bottom:6px">${L('ถ่ายอย่างน้อย 2 รูป · มุมเดียวกับ Before','Min 2 photos · same angle as Before')}</div>
      <div class="ph-list">
        <div class="ph-thumb after">🖼</div>
        <div class="ph-thumb after">🖼</div>
        <button class="ph-add"><span class="ico">📸</span>${L('เพิ่ม','Add')}</button>
      </div>
    </div>

    <div class="form-sec">
      <h4>📝 ${L('รายละเอียดการแก้ไข','Action Taken')} <span style="color:var(--error)">★</span></h4>
      <textarea class="form-input">${L('เพิ่ม Ground Rod ⌀16mm × 3ม. · ต่อด้วย Exothermic Welding · เติม Salt 1กก. + Charcoal 2กก. · เติมน้ำ 20L · บ่ม 24ชม. · วัดได้ 3.4 Ω ✓','Added Ground Rod ⌀16mm × 3m · Exothermic Welding · 1kg Salt + 2kg Charcoal · 20L water · 24h cure · 3.4 Ω ✓')}</textarea>
    </div>

    <div class="form-sec">
      <h4>📊 ${L('ผลทดสอบหลังแก้','Re-test Result')}</h4>
      <input class="form-input" value="${L('3.4 Ω (ผ่านเกณฑ์ ≤ 5 Ω)','3.4 Ω (passes ≤ 5 Ω)')}" />
    </div>

    <div style="font-size:11px;color:var(--muted);padding:0 14px 80px">* ${L("หลังกดส่ง NCR จะเปลี่ยนสถานะเป็น 'NCR_VERIFY' รอ Inspector ตรวจซ้ำ","After submit, NCR → NCR_VERIFY")}</div>

    <div class="submit-bar">
      <button class="btn-create" data-act="submit-resolution" style="background:var(--purple)">📤 ${L('ส่งผลการแก้ไข','Submit Resolution')}</button>
    </div>
  `;
}

/* ============== CREATE TASK ============== */
function renderNcrCreate(){
  const ctx = state.ncrCreateContext || {};
  const t = TASKS.find(x => x.code === ctx.taskCode) || TASKS[0];
  const itemCode = ctx.itemCode || 'CK-XX';
  const itemLabel = ctx.itemLabel || '';

  // Suggested next NCR ID
  const nextNum = String(Math.max(...Object.keys(NCRS).map(k => parseInt(k.slice(-4))).filter(n => !isNaN(n))) + 1).padStart(4, '0');
  const nextNcrId = 'NCR-2026-' + nextNum;

  // Defaults
  if(!state.nForm) state.nForm = {};
  const f = state.nForm;
  if(!f.sev) f.sev = 'high';
  if(!f.cat) f.cat = 'workmanship';
  if(!f.title) f.title = '';
  if(!f.desc) f.desc = '';
  if(!f.rootCause) f.rootCause = '';
  if(!f.corrective) f.corrective = '';
  if(!f.owner) f.owner = 'somchai';
  if(!f.due) f.due = computeDueDate(f.sev);
  if(f.stopWork === undefined) f.stopWork = (f.sev === 'crit');
  if(!f.beforePhotos) f.beforePhotos = 1;

  const slaText = f.sev === 'crit' ? L('≤ 24 ชม.','≤ 24h')
                : f.sev === 'high' ? L('≤ 3 วัน','≤ 3d')
                : f.sev === 'med' ? L('≤ 7 วัน','≤ 7d')
                : L('≤ 14 วัน','≤ 14d');

  return `
    <div class="screen-head">
      <button class="back" data-act="back">←</button>
      <div class="title">
        <div class="t-main">🚨 ${L('สร้าง NCR ใหม่','Create NCR')}</div>
        <div class="t-sub">${nextNcrId} · ${L('จาก','from')} ${t.code}</div>
      </div>
      <div class="head-act">
        <div class="lang-toggle">
          <button class="${state.lang==='th'?'on':''}" data-act="lang" data-val="th">🇹🇭</button>
          <button class="${state.lang==='en'?'on':''}" data-act="lang" data-val="en">🇬🇧</button>
        </div>
      </div>
    </div>

    <div class="ncr-create-banner">
      <span class="ico">⚠</span>
      <div>
        <div class="label">${L('รายการตรวจที่ไม่ผ่าน','Failed inspection item')}</div>
        <div class="item">${itemCode} · ${itemLabel || L('(ไม่ระบุ)','(unset)')}</div>
        <div class="meta">${L('Task','Task')}: ${t.code} · ${L(t.nameTh, t.nameEn)}</div>
      </div>
    </div>

    <div class="form-sec">
      <h4>📝 ${L('หัวข้อ NCR','NCR Title')}</h4>
      <div class="form-grp">
        <label>${L('สรุปปัญหาแบบสั้น (TH)','Brief title (TH)')} <span class="req">★</span></label>
        <input class="form-input" id="nf-title" placeholder="${L('เช่น: พบรอยร้าวที่ผนัง W-A02','e.g.: Crack found at wall W-A02')}" value="${f.title}" />
      </div>
    </div>

    <div class="form-sec">
      <h4>🔥 ${L('ระดับความรุนแรง (Severity)','Severity')} <span class="req">★</span></h4>
      <div class="chip-pick" data-pick="sev">
        <button class="${f.sev==='crit'?'on':''}" data-val="crit">🛑 ${L('วิกฤต','Critical')}</button>
        <button class="${f.sev==='high'?'on':''}" data-val="high">🔥 ${L('สูง','High')}</button>
        <button class="${f.sev==='med'?'on':''}" data-val="med">⚠ ${L('กลาง','Medium')}</button>
        <button class="${f.sev==='low'?'on':''}" data-val="low">▫ ${L('ต่ำ','Low')}</button>
      </div>
      <div style="font-size:11px; color:var(--muted); margin-top:8px; font-weight:600">📌 SLA: ${slaText} · ${L('กำหนดวันแก้อัตโนมัติด้านล่าง','Due date auto-set below')}</div>
    </div>

    <div class="form-sec">
      <h4>📂 ${L('หมวดข้อบกพร่อง','Defect Category')} <span class="req">★</span></h4>
      <div class="chip-pick cat" data-pick="cat">
        <button class="${f.cat==='material'?'on':''}" data-val="material">📦 ${L('วัสดุ','Material')}</button>
        <button class="${f.cat==='workmanship'?'on':''}" data-val="workmanship">👷 ${L('ฝีมือ','Workmanship')}</button>
        <button class="${f.cat==='design'?'on':''}" data-val="design">📐 ${L('การออกแบบ','Design')}</button>
        <button class="${f.cat==='other'?'on':''}" data-val="other">▫ ${L('อื่นๆ','Other')}</button>
      </div>
    </div>

    <div class="form-sec">
      <h4>📋 ${L('รายละเอียดข้อบกพร่อง','Defect Description')}</h4>
      <div class="form-grp">
        <label>${L('อธิบายปัญหาให้ละเอียด','Describe the defect in detail')} <span class="req">★</span></label>
        <textarea class="form-input" id="nf-desc" rows="4" placeholder="${L('ระบุขนาด · ตำแหน่ง · ความรุนแรง · ผลกระทบ...','Size · location · severity · impact...')}">${f.desc}</textarea>
      </div>
    </div>

    <div class="form-sec">
      <h4>📷 ${L('รูปก่อนแก้ไข (Before Photos)','Before Photos')} <span class="req">★</span></h4>
      <div style="font-size:11px; color:var(--muted); margin-bottom:8px; font-weight:600">${L('ต้องอย่างน้อย 1 รูป','Minimum 1 photo required')}</div>
      <div class="upload-photos">
        ${Array.from({length: f.beforePhotos}).map(() => '<div class="ph">🖼</div>').join('')}
        <button class="add" data-act="add-photo"><span class="ico">📸</span>${L('เพิ่ม','Add')}</button>
      </div>
    </div>

    <div class="form-sec">
      <h4>🔍 ${L('สาเหตุที่คาดการณ์ (Root Cause)','Suspected Root Cause')}</h4>
      <div class="form-grp">
        <textarea class="form-input" id="nf-root" rows="2" placeholder="${L('สาเหตุที่คาดว่าทำให้เกิดข้อบกพร่อง (ไม่บังคับ)','Why this likely happened (optional)')}">${f.rootCause}</textarea>
      </div>
    </div>

    <div class="form-sec">
      <h4>🛠 ${L('แนวทางแก้ไขที่เสนอ','Suggested Corrective Action')}</h4>
      <div class="form-grp">
        <textarea class="form-input" id="nf-corr" rows="2" placeholder="${L('แนะนำวิธีแก้ (ไม่บังคับ)','Suggested fix (optional)')}">${f.corrective}</textarea>
      </div>
    </div>

    <div class="form-sec">
      <h4>👤 ${L('มอบหมายผู้รับผิดชอบ','Assign Owner')} <span class="req">★</span></h4>
      <div class="form-grp">
        <label>${L('Field / Sub-contractor','Field / Sub-contractor')} <span class="req">★</span></label>
        ${(() => {
          const sub = SUB_CONTRACTORS.find(s => s.id === f.owner) || SUB_CONTRACTORS[0];
          const nf = nextFreeOffset(sub);
          const nfStr = state.lang === 'th' ? offsetToDateStr(nf) : offsetToDateEnStr(nf);
          return `<button class="owner-tap-row" data-act="open-owner-pick">
            <div class="av">${sub.initials}</div>
            <div class="text">
              <div class="name">${L(sub.nameTh, sub.nameEn)}</div>
              <div class="sub">${L(sub.roleTh, sub.roleEn)} · 📅 ${L('ว่าง','Free')}: ${nfStr}</div>
            </div>
            <span class="chev">›</span>
          </button>`;
        })()}
      </div>
      <div class="form-grp">
        <label>${L('วันที่กำหนดแก้','Due Date')} <span class="req">★</span></label>
        <input class="form-input" id="nf-due" type="date" value="${f.due}" />
      </div>
    </div>

    ${(f.sev === 'crit') ? `<div class="form-sec">
      <h4>🛑 ${L('Stop-Work Flag','Stop-Work Flag')}</h4>
      <div class="sw-row" data-act="toggle-sw">
        <span class="sw-ic">🛑</span>
        <div class="sw-text">
          <div class="t">${L('หยุดงานทันที (Stop-Work)','Stop work immediately')}</div>
          <div class="s">${L('แจ้ง PM + Safety Officer ทันที · งานในจุดนี้จะถูก freeze จนกว่าจะอนุมัติ','Notify PM + Safety · work frozen until approved')}</div>
        </div>
        <div class="sw-tgl ${f.stopWork?'on':''}"></div>
      </div>
    </div>` : ''}

    <div style="font-size:11px; color:var(--muted); padding:0 14px 80px; line-height:1.6">
      ※ ${L('หลังกดสร้าง · NCR จะถูกส่งให้ QC Manager ยืนยัน → มอบหมายผู้แก้ → Status: NCR_OPEN','After submit · NCR sent to QCM for confirmation → assigned → Status: NCR_OPEN')}
    </div>

    <div class="submit-bar">
      <button class="btn-save" data-act="back">${L('ยกเลิก','Cancel')}</button>
      <button class="btn-create" data-act="create-ncr-submit">💾 ${L('บันทึก','Save')}</button>
    </div>
  `;
}

function renderOwnerPick(){
  // Build sorted candidates (earliest free first, then by least active tasks)
  const sorted = SUB_CONTRACTORS.map(s => ({...s, nextFree: nextFreeOffset(s)}))
    .sort((a, b) => {
      const aF = a.nextFree === null ? 999 : a.nextFree;
      const bF = b.nextFree === null ? 999 : b.nextFree;
      if(aF !== bF) return aF - bF;
      return a.activeTasks - b.activeTasks;
    });

  const currentOwner = (state.nForm && state.nForm.owner) || 'somchai';

  // Build 30-day calendar header (day + weekday abbreviation)
  const wkdTh = ['อา','จ','อ','พ','พฤ','ศ','ส'];
  const wkdEn = ['Su','Mo','Tu','We','Th','Fr','Sa'];
  const wkds = state.lang === 'th' ? wkdTh : wkdEn;
  const headCells = Array.from({length:30}).map((_, i) => {
    const d = new Date(2026, 5, 21 + i);
    const dow = d.getDay();
    const isWE = dow === 0 || dow === 6;
    return `<div class="op-cal-d ${isWE ? 'we' : ''}">${d.getDate()}<span class="wkd">${wkds[dow]}</span></div>`;
  }).join('');

  return `
    <div class="screen-head">
      <button class="back" data-act="back">←</button>
      <div class="title">
        <div class="t-main">👥 ${L('เลือกผู้รับผิดชอบ','Pick Owner')}</div>
        <div class="t-sub">${L('Field / Sub-contractor · ปฏิทิน 30 วัน','Field/Sub · 30-day calendar')}</div>
      </div>
      <div class="head-act">
        <div class="lang-toggle">
          <button class="${state.lang==='th'?'on':''}" data-act="lang" data-val="th">🇹🇭</button>
          <button class="${state.lang==='en'?'on':''}" data-act="lang" data-val="en">🇬🇧</button>
        </div>
      </div>
    </div>

    <div class="op-header-info">📅 ${L('เรียงตามวันที่ว่างก่อน · ผู้ว่างเร็วสุดอยู่บนสุด · ดูปฏิทิน 30 วันข้างหน้า','Sorted by earliest free day · scroll to see 30-day calendar')}</div>

    <div class="op-scroll-hint">
      <span>${L('เลื่อนซ้าย-ขวาดูปฏิทิน','Scroll horizontally for calendar')}</span>
    </div>

    <div class="op-table-wrap">
      <div class="op-table">
        <!-- Header row -->
        <div class="op-th">
          <div>${L('ผู้รับผิดชอบ','Person')}</div>
          <div>${L('บทบาท','Role')}</div>
          <div>${L('ว่างวันแรก','Next free')}</div>
          <div style="text-align:center">${L('Tasks','Tasks')}</div>
          <div class="op-cal-head">${headCells}</div>
          <div></div>
        </div>

        <!-- Data rows -->
        ${sorted.map(p => {
          const isPicked = p.id === currentOwner;
          const nfStr = state.lang === 'th' ? offsetToDateStr(p.nextFree) : offsetToDateEnStr(p.nextFree);
          const inDays = p.nextFree === null ? '' : (p.nextFree === 0 ? L('วันนี้','Today') : `${p.nextFree}${L(' วัน','d')}`);

          const calCells = Array.from({length:30}).map((_, i) => {
            const d = new Date(2026, 5, 21 + i);
            const dow = d.getDay();
            const isWE = dow === 0 || dow === 6;
            const isBusy = p.busyOffsets.includes(i);
            const isNext = i === p.nextFree;
            const cls = isNext ? 'next' : isBusy ? 'busy' : isWE ? 'we' : 'free';
            return `<div class="op-cal-cell ${cls}" title="${state.lang==='th'?'วันที่ ':'Day '}${d.getDate()}"></div>`;
          }).join('');

          return `<div class="op-row ${isPicked ? 'picked' : ''}">
            <div class="op-person">
              <div class="op-avatar">${p.initials}</div>
              <div class="op-name-col">
                <div class="op-name">${L(p.nameTh, p.nameEn)}</div>
                <div class="op-email">${p.id}@tarnas.co.th</div>
              </div>
            </div>
            <div class="op-role">${L(p.roleTh, p.roleEn)}</div>
            <div class="op-free">${nfStr}<small>· ${inDays}</small></div>
            <div class="op-tasks">${p.activeTasks}</div>
            <div class="op-cal">${calCells}</div>
            <div>
              <button class="op-pick-btn ${isPicked ? 'picked' : ''}" data-act="pick-owner" data-owner="${p.id}">
                ${isPicked ? `✓ ${L('เลือกแล้ว','Picked')}` : L('เลือก','Pick')}
              </button>
            </div>
          </div>`;
        }).join('')}
      </div>
    </div>

    <div class="op-legend">
      <span class="lg"><i class="free"></i> ${L('ว่าง','Free')}</span>
      <span class="lg"><i class="busy"></i> ${L('ไม่ว่าง','Busy')}</span>
      <span class="lg"><i class="we"></i> ${L('วันหยุด','Weekend')}</span>
      <span class="lg"><i class="next"></i> ${L('ว่างวันแรก','Next free')}</span>
    </div>
  `;
}

// v8.0 — Sync form inputs into state.nForm before navigating
// v8.0 — Sync form inputs into state.nForm before navigating
function ncrCreateSyncForm(){
  const f = state.nForm = state.nForm || {};
  const get = id => { const el = document.getElementById(id); return el ? el.value : null; };
  let v;
  v = get('nf-title'); if(v !== null) f.title = v;
  v = get('nf-desc'); if(v !== null) f.desc = v;
  v = get('nf-root'); if(v !== null) f.rootCause = v;
  v = get('nf-corr'); if(v !== null) f.corrective = v;
  v = get('nf-due'); if(v !== null) f.due = v;
}

function computeDueDate(sev){
  // From today (assume 2026-06-21) + SLA days
  const today = new Date(2026, 5, 21);
  const days = sev === 'crit' ? 1 : sev === 'high' ? 3 : sev === 'med' ? 7 : 14;
  today.setDate(today.getDate() + days);
  return today.toISOString().slice(0,10);
}

function renderCreate(){
  const f = state.createForm || {};
  const site = f.siteCode ? CT_SITES.find(s => s.code === f.siteCode) : null;
  const zone = site ? site.zones.find(z => z.code === f.zoneCode) : null;
  const siteZonePicked = site && zone;

  const wbsL3 = f.wbsL3Code ? (() => {
    for(const l1 of CT_WBS) for(const l2 of l1.l2) for(const l3 of l2.l3) if(l3.code === f.wbsL3Code) return { l3, l1, l2 };
    return null;
  })() : null;

  const insp = f.inspectorEmail ? findPerson(f.inspectorEmail, CT_INSPECTORS) : null;
  const appr = f.approverEmail ? findPerson(f.approverEmail, CT_APPROVERS) : null;

  return `
    <div class="screen-head">
      <button class="back" data-act="back">←</button>
      <div class="title">
        <div class="t-main">${L('สร้าง Task ใหม่','Create New Task')}</div>
        <div class="t-sub">${L('QC Manager · กำหนดผู้ตรวจสอบและผู้อนุมัติ','QCM · Assign inspector and approver')}</div>
      </div>
    </div>

    <div class="form-sec">
      <h4>📋 ${L('ข้อมูลพื้นฐาน','Basic Info')}</h4>
      <!-- v24.0 · Task Code with Auto/Manual toggle -->
      <div class="form-grp">
        <label>Task Code <span class="req">★</span></label>
        <div class="code-row">
          <input class="form-input" id="ct-code" value="${f.code||'TQ-2026-061'}"
            ${f.codeMode==='auto' ? 'readonly style="background:#F8FAFC;color:var(--muted)"' : ''} />
          <div class="code-toggle">
            <button class="${f.codeMode==='auto'?'on':''}" data-ct-code="auto">${L('อัตโนมัติ','Auto')}</button>
            <button class="${f.codeMode==='manual'?'on':''}" data-ct-code="manual">${L('กำหนดเอง','Manual')}</button>
          </div>
        </div>
      </div>
      <!-- v24.0 · Removed EN name · Renamed TH → ชื่อ Task -->
      <div class="form-grp">
        <label>${L('ชื่อ Task','Task Name')} <span class="req">★</span></label>
        <input class="form-input" id="ct-name" value="${f.name||''}" placeholder="${L('ตรวจงานสี ชั้น 6','Paint · Floor 6')}" />
      </div>
      <div class="form-grp">
        <label>${L('รายละเอียดงาน','Description')}</label>
        <textarea class="form-input" id="ct-desc" placeholder="${L('ระบุขอบเขต · จุดสำคัญ · เกณฑ์ผ่าน','Scope · key points · acceptance')}">${f.description||''}</textarea>
      </div>
    </div>

    <div class="form-sec">
      <h4>📍 ${L('โครงการ + ตำแหน่ง','Project + Location')}</h4>
      <!-- v29.0 · Project field · Inline dropdown -->
      <div class="form-grp ${state.showPicker==='project'?'pk-dd-open':''}">
        <label>${L('โครงการ','Project')} <span class="req">★</span></label>
        ${(() => {
          const pj = f.projectId ? CT_PROJECTS.find(p => p.id === f.projectId) : null;
          return `<button class="form-trigger ${pj?'picked':''}" data-open-picker="project">
            ${pj ? `
              <span class="picked-code">${pj.code}</span>
              <span class="picked-name">${L(pj.name_th, pj.name_en)}</span>
            ` : `<span class="placeholder">${L('แตะเพื่อเลือกโครงการ...','Tap to pick project...')}</span>`}
            <span class="chev">▼</span>
          </button>`;
        })()}
        ${state.showPicker === 'project' ? renderProjectDropdown() : ''}
      </div>
      <!-- v24.0 · Site/Zone hierarchy picker -->
      <div class="form-grp">
        <label>${L('ไซต์ / โซน','Site / Zone')} <span class="req">★</span></label>
        <button class="form-trigger ${siteZonePicked?'picked':''}" data-open-picker="site">
          ${siteZonePicked ? `
            <span class="picked-code">${site.code} / ${zone.code}</span>
            <span class="picked-name">${L(site.name_th, site.name_en)} · ${L(zone.name_th, zone.name_en)}</span>
          ` : `<span class="placeholder">${L('แตะเพื่อเลือกไซต์และโซน...','Tap to pick site & zone...')}</span>`}
          <span class="chev">›</span>
        </button>
      </div>
      <!-- v24.0 · WBS hierarchy picker -->
      <div class="form-grp">
        <label>${L('โครงสร้างการแบ่งงาน (WBS)/กิจกรรม','WBS / Activity')} <span class="req">★</span></label>
        <button class="form-trigger ${wbsL3?'picked':''}" data-open-picker="wbs">
          ${wbsL3 ? `
            <span class="picked-code">${wbsL3.l3.code}</span>
            <span class="picked-name">${L(wbsL3.l3.name_th, wbsL3.l3.name_en)}</span>
          ` : `<span class="placeholder">${L('แตะเพื่อเลือก WBS L3 activity...','Tap to pick L3 activity...')}</span>`}
          <span class="chev">›</span>
        </button>
      </div>
    </div>

    <div class="form-sec">
      <h4>🔄 Workflow + Checklist</h4>
      <div class="form-grp">
        <label>Workflow <span class="req">★</span></label>
        <select class="form-input">
          <option selected>${L('มาตรฐาน QC (7 ขั้น)','Standard QC (7 steps)')}</option>
          <option>${L('แบบเรียบง่าย (3 ขั้น)','Simple (3 steps)')}</option>
        </select>
      </div>
      <div class="form-grp">
        <label>Checklist <span class="req">★</span></label>
        <select class="form-input">
          <option selected>${L('ตรวจงานสี v1.0 (6 รายการ)','Paint v1.0 (6 items)')}</option>
          <option>${L('ตรวจคอนกรีต v1.1','Concrete v1.1')}</option>
        </select>
      </div>
    </div>

    <div class="form-sec">
      <h4>⏰ ${L('ความสำคัญ + วันที่','Priority + Dates')}</h4>
      <div class="form-grp">
        <label>${L('ระดับความสำคัญ','Priority')} <span class="req">★</span></label>
        <div class="prio-pick">
          <button class="low ${f.priority==='low'?'on':''}" data-prio="low">${L('ต่ำ','Low')}</button>
          <button class="medium ${f.priority==='medium'?'on':''}" data-prio="medium">${L('กลาง','Medium')}</button>
          <button class="high ${f.priority==='high'?'on':''}" data-prio="high">${L('สูง','High')}</button>
          <button class="urgent ${f.priority==='urgent'?'on':''}" data-prio="urgent">${L('ด่วน','Urgent')}</button>
        </div>
      </div>
      <div class="form-row">
        <div class="form-grp">
          <label>${L('วันที่เริ่ม','Start')}</label>
          <input class="form-input" type="date" value="${f.startDate||'2026-06-22'}" />
        </div>
        <div class="form-grp">
          <label>${L('วันที่กำหนดเสร็จ','Due')} <span class="req">★</span></label>
          <input class="form-input" type="date" value="${f.dueDate||'2026-06-29'}" />
        </div>
      </div>
    </div>

    <!-- v24.0 · Section renamed "มอบหมาย" · Inspector picker + Approver picker -->
    <div class="form-sec">
      <h4>👤 ${L('มอบหมาย','Assign')}</h4>
      <div class="form-grp">
        <label>${L('ผู้ตรวจสอบคุณภาพงาน','QC Inspector')} <span class="req">★</span></label>
        <button class="form-trigger ${insp?'picked':''}" data-open-picker="inspector">
          ${insp ? `
            <span class="picked-avatar">${insp.avatar}</span>
            <span class="picked-name">${L(insp.name_th, insp.name_en)}</span>
            <span class="pk-workload ${workloadLevel(insp.activeTasks)}">${insp.activeTasks} ${L('งาน','tasks')}</span>
          ` : `<span class="placeholder">${L('แตะเพื่อเลือกผู้ตรวจสอบ...','Tap to pick inspector...')}</span>`}
          <span class="chev">›</span>
        </button>
      </div>
      <div class="form-grp">
        <label>${L('ผู้อนุมัติ','Approver')} <span class="req">★</span></label>
        <button class="form-trigger ${appr?'picked':''}" data-open-picker="approver">
          ${appr ? `
            <span class="picked-avatar">${appr.avatar}</span>
            <span class="picked-name">${L(appr.name_th, appr.name_en)}</span>
            <span class="pk-workload ${workloadLevel(appr.activeTasks)}">${appr.activeTasks} ${L('งาน','tasks')}</span>
          ` : `<span class="placeholder">${L('แตะเพื่อเลือกผู้อนุมัติ...','Tap to pick approver...')}</span>`}
          <span class="chev">›</span>
        </button>
      </div>
    </div>

    <div style="height:80px"></div>

    <div class="submit-bar">
      <button class="btn-save">${L('บันทึกร่าง','Save Draft')}</button>
      <button class="btn-create" data-act="task-created">＋ ${L('บันทึก + Assign','Save + Assign')}</button>
    </div>

    ${state.showPicker ? renderPickerOverlay() : ''}
  `;
}

/* v24.0 — Picker overlays (site/wbs/inspector/approver) */
function renderPickerOverlay(){
  const kind = state.showPicker;
  // v29.0 · Project uses inline dropdown (rendered in renderCreate) · not overlay
  if(kind === 'site') return renderSitePicker();
  if(kind === 'wbs') return renderWbsPicker();
  if(kind === 'inspector') return renderPersonPicker('inspector');
  if(kind === 'approver') return renderPersonPicker('approver');
  return '';
}

/* v29.0 — Project inline dropdown (renders below the Project trigger button) */
function renderProjectDropdown(){
  const q = (state.pickerSearch||'').toLowerCase();
  const filter = state.projectFilter || 'all';
  const currentId = state.createForm.projectId || '';

  let list = CT_PROJECTS;
  if(filter !== 'all') list = list.filter(p => p.status === filter);
  const filtered = list.filter(p => !q ||
    p.code.toLowerCase().includes(q) ||
    p.name_th.toLowerCase().includes(q) ||
    (p.name_en||'').toLowerCase().includes(q) ||
    (p.location_th||'').toLowerCase().includes(q));

  const counts = {
    all: CT_PROJECTS.length,
    active: CT_PROJECTS.filter(p => p.status === 'active').length,
    near: CT_PROJECTS.filter(p => p.status === 'near').length,
    starting: CT_PROJECTS.filter(p => p.status === 'starting').length,
  };
  const chips = [
    ['all',      L('ทั้งหมด','All')],
    ['active',   L('ดำเนินการ','Active')],
    ['near',     L('ใกล้เสร็จ','Near')],
    ['starting', L('เพิ่งเริ่ม','Starting')]
  ];

  return `
    <div class="pk-dd-backdrop" data-pk-dd-close="1"></div>
    <div class="pk-dd-panel">
      <div class="pk-dd-search">
        <div class="pk-dd-search-wrap">
          <span class="icon">🔍</span>
          <input id="pk-search-input" placeholder="${L('ค้นหาโครงการ · code · location...','Search project...')}" value="${q}" autocomplete="off" />
          ${q ? `<button class="clear" data-pk-search-clear="1">✕</button>` : ''}
        </div>
      </div>
      <div class="pk-dd-chips">
        ${chips.map(([k,lbl]) => `<button class="pk-dd-chip ${filter===k?'on':''}" data-pk-pfilter='${k}'>
          ${lbl}<span class="n">${counts[k]}</span>
        </button>`).join('')}
      </div>
      <div class="pk-dd-list">
        ${filtered.length === 0 ? `<div class="pk-dd-empty">
          <div class="icon">🔎</div>
          <div class="title">${L('ไม่พบโครงการ','No projects')}</div>
          <div class="desc">${L('ลองปรับคำค้นหาหรือ tab อื่น','Try another tab or search')}</div>
        </div>` :
        filtered.map(p => {
          const isOn = currentId === p.id;
          const st = projectStatusLabel(p.status);
          const cat = projectCategoryLabel(p.category);
          return `<div class="pk-dd-item ${isOn?'on':''}" data-pk-project-select='${p.id}'>
            <div class="pk-dd-thumb" style="background:linear-gradient(135deg,${p.color},${p.color}dd)">${p.thumbInitials}</div>
            <div class="pk-dd-body">
              <div class="pk-dd-line1">
                <span class="pk-dd-name">${L(p.name_th, p.name_en)}</span>
                <span class="pk-dd-code">${p.code}</span>
              </div>
              <div class="pk-dd-sub">
                <span class="cat">${cat.icon} ${L(cat.th, cat.en)}</span>
                <span class="dot">·</span>
                <span>📍 ${L(p.location_th, p.location_en)}</span>
              </div>
              <div class="pk-dd-prog">
                <div class="bar"><div class="fill" style="width:${p.progress}%; background:${p.color}"></div></div>
                <span class="pct">${p.progress}%</span>
                <span class="badge" style="background:${st.bg}; color:${st.color}">${L(st.th, st.en)}</span>
              </div>
            </div>
            <div class="pk-dd-acc">${isOn?'✓':'›'}</div>
          </div>`;
        }).join('')}
      </div>
      <div class="pk-dd-count">${L('พบ','Found')} ${filtered.length}/${counts.all} ${L('โครงการ','projects')}</div>
    </div>
  `;
}

/* v25.0 — Search bar helper */
function pkSearchBar(placeholder){
  const q = state.pickerSearch || '';
  return `<div class="pk-search">
    <div class="searchbox">
      <span class="icon">🔍</span>
      <input id="pk-search-input" placeholder="${placeholder}" value="${q}" autocomplete="off" />
      ${q ? `<button class="clear" data-pk-search-clear="1">✕</button>` : ''}
    </div>
  </div>`;
}

/* v25.0 — Empty state helper */
function pkEmpty(msg){
  return `<div class="pk-empty">
    <div class="icon">🔎</div>
    <div class="title">${L('ไม่พบผลลัพธ์','No results')}</div>
    <div class="desc">${msg}</div>
  </div>`;
}

/* v28.0 — Project picker · true native mobile-app screen · grouped table */
function renderProjectPicker(){
  const q = (state.pickerSearch||'').toLowerCase();
  const filter = state.projectFilter || 'all';
  const pending = state.pickerPending || {};
  const currentId = pending.projectId || state.createForm.projectId || '';
  const selectedProject = currentId ? CT_PROJECTS.find(p => p.id === currentId) : null;

  // Filter (segment + search)
  let list = CT_PROJECTS;
  if(filter !== 'all') list = list.filter(p => p.status === filter);
  const filtered = list.filter(p => !q ||
    p.code.toLowerCase().includes(q) ||
    p.name_th.toLowerCase().includes(q) ||
    (p.name_en||'').toLowerCase().includes(q) ||
    (p.location_th||'').toLowerCase().includes(q));

  // Counts
  const counts = {
    all: CT_PROJECTS.length,
    active: CT_PROJECTS.filter(p => p.status === 'active').length,
    near: CT_PROJECTS.filter(p => p.status === 'near').length,
    starting: CT_PROJECTS.filter(p => p.status === 'starting').length,
  };
  const segs = [
    ['all',      L('ทั้งหมด','All')],
    ['active',   L('ดำเนินการ','Active')],
    ['near',     L('ใกล้เสร็จ','Near')],
    ['starting', L('เพิ่งเริ่ม','Starting')]
  ];
  const canConfirm = !!pending.projectId;

  // Group into sections by status (order: active → near → starting)
  const sectionOrder = ['active','near','starting'];
  const sections = sectionOrder.map(k => ({
    key:k, label: projectStatusLabel(k), items: filtered.filter(p => p.status === k)
  })).filter(s => s.items.length > 0);

  const renderCell = (p) => {
    const isOn = currentId === p.id;
    const st = projectStatusLabel(p.status);
    const cat = projectCategoryLabel(p.category);
    return `<div class="pk-gcell ${isOn?'on':''}" data-pk-project='${p.id}'>
      <div style="position:relative">
        <div class="pk-gthumb" style="background:linear-gradient(135deg,${p.color},${p.color}dd)">${p.thumbInitials}</div>
        <div class="pk-gthumb-code">${p.code}</div>
      </div>
      <div class="pk-gbody">
        <div class="pk-gtitle">${L(p.name_th, p.name_en)}</div>
        <div class="pk-gsub">
          <span class="cat">${cat.icon} ${L(cat.th, cat.en)}</span>
          <span class="dot">·</span>
          <span>${L(p.location_th, p.location_en)}</span>
        </div>
        <div class="pk-gprog">
          <div class="bar"><div class="fill" style="width:${p.progress}%; background:${p.color}"></div></div>
          <span class="pct">${p.progress}%</span>
          <span class="badge" style="background:${st.bg}; color:${st.color}">${L(st.th, st.en)}</span>
        </div>
      </div>
      <div class="pk-gacc">›</div>
    </div>`;
  };

  return `
    <div class="picker-overlay">
      <div class="picker-sheet picker-sheet-v25 pk-app-screen">
        <div class="picker-head">
          <button class="back" data-picker-close="1">←</button>
          <div>
            <div class="title">🏗️ ${L('เลือกโครงการ','Choose Project')}</div>
            <div class="title-sub">${L('บทบาท: QC Manager','Role: QC Manager')}</div>
          </div>
        </div>
        <div class="pk-lg-title">
          <div class="t">${L('โครงการ','Projects')}</div>
          <div class="s">${L('เลือก 1 โครงการเพื่อสร้าง Task ใหม่','Pick 1 project to create a task')} · ${filtered.length}/${counts.all}</div>
        </div>
        ${pkSearchBar(L('ค้นหาโครงการ...','Search projects...'))}
        <div class="pk-seg">
          <div class="pk-seg-inner">
            ${segs.map(([k,lbl]) => `<button class="pk-seg-btn ${filter===k?'on':''}" data-pk-pfilter='${k}'>
              ${lbl}<span class="n">${counts[k]}</span>
            </button>`).join('')}
          </div>
        </div>
        <div class="picker-body">
          ${selectedProject ? (() => {
            const st = projectStatusLabel(selectedProject.status);
            return `<div class="pk-hero">
              <div class="pk-hero-top">
                <div class="pk-hero-thumb">${selectedProject.thumbInitials}</div>
                <div class="pk-hero-txt">
                  <div class="pk-hero-label">${L('โครงการที่เลือก','Currently selected')}</div>
                  <div class="pk-hero-name">${L(selectedProject.name_th, selectedProject.name_en)}</div>
                </div>
                <button class="pk-hero-clear" data-pk-project-clear="1">✕</button>
              </div>
              <div class="pk-hero-stats">
                <div class="pk-hero-stat"><div class="n">${selectedProject.activeTasks}</div><div class="l">${L('งาน','Tasks')}</div></div>
                <div class="pk-hero-stat"><div class="n">${selectedProject.sites}</div><div class="l">${L('ไซต์','Sites')}</div></div>
                <div class="pk-hero-stat"><div class="n">${selectedProject.contractValue}</div><div class="l">${L('มูลค่า','Value')}</div></div>
                <div class="pk-hero-ring">
                  ${progressRingSvg(selectedProject.progress, 44, '#FFFFFF')}
                  <span class="pct">${selectedProject.progress}%</span>
                </div>
              </div>
            </div>`;
          })() : ''}
          ${filtered.length === 0 ? pkEmpty(L('ลองปรับ tab หรือคำค้นหา','Try another tab or search')) :
            sections.map(sec => `
              <div class="pk-gsec-header">
                <span>${L(sec.label.th, sec.label.en)}</span>
                <span class="cnt">${sec.items.length}</span>
              </div>
              <div class="pk-gsec">
                ${sec.items.map(renderCell).join('')}
              </div>
            `).join('')
          }
          <div style="height:16px"></div>
        </div>
        <div class="pk-app-foot">
          <button class="cancel" data-picker-close="1">${L('ยกเลิก','Cancel')}</button>
          <button class="confirm" data-picker-confirm="project" ${canConfirm?'':'disabled'}>
            ✓ ${L('ยืนยัน','Confirm')}
          </button>
        </div>
      </div>
    </div>
  `;
}

function renderSitePicker(){
  // v31.0 · Bottom Sheet Modal · single view with site pills + zone list
  const q = (state.pickerSearch||'').toLowerCase();
  const pending = state.pickerPending || {};
  // Current site: from pending, or from committed form, or default to first
  const currentSiteCode = pending.siteCode || state.createForm.siteCode || CT_SITES[0].code;
  const currentZoneCode = (pending.siteCode === currentSiteCode ? pending.zoneCode : '')
                       || (state.createForm.siteCode === currentSiteCode ? state.createForm.zoneCode : '')
                       || '';
  const currentSite = CT_SITES.find(s => s.code === currentSiteCode) || CT_SITES[0];

  const zonesFiltered = currentSite.zones.filter(z => !q ||
    z.code.toLowerCase().includes(q) ||
    z.name_th.toLowerCase().includes(q) ||
    (z.name_en||'').toLowerCase().includes(q) ||
    (z.desc_th||'').toLowerCase().includes(q));

  const canConfirm = !!(pending.siteCode && pending.zoneCode);

  return `
    <div class="pk-modal-backdrop" data-pk-modal-backdrop="1">
      <div class="pk-modal-sheet" data-pk-modal-stop="1">
        <div class="pk-modal-handle"></div>

        <div class="pk-modal-header">
          <div class="h-body">
            <div class="h-title">📍 ${L('เลือกไซต์ / โซน','Pick Site / Zone')}</div>
            <div class="h-sub">${L('เลือกไซต์แล้วเลือกโซนภายในไซต์นั้น','Pick site then a zone within it')}</div>
          </div>
          <button class="h-close" data-picker-close="1" aria-label="close">✕</button>
        </div>

        <div class="pk-modal-sites">
          ${CT_SITES.map(s => {
            const isOn = currentSiteCode === s.code;
            return `<button class="pk-modal-site-pill ${isOn?'on':''}" data-pk-modal-site='${s.code}'>
              <span class="pk-modal-pill-icon" style="background:linear-gradient(135deg,${s.color},${s.color}dd)">${s.icon}</span>
              <span class="pk-modal-pill-info">
                <span class="pk-modal-pill-code">${s.code} · ${s.zones.length} ${L('โซน','zones')}</span>
                <span class="pk-modal-pill-name">${L(s.name_th, s.name_en)}</span>
              </span>
            </button>`;
          }).join('')}
        </div>

        <div class="pk-modal-info">
          <div class="pk-modal-info-icon" style="background:linear-gradient(135deg,${currentSite.color},${currentSite.color}dd)">${currentSite.icon}</div>
          <div class="pk-modal-info-body">
            <div class="pk-modal-info-line1">
              <span class="pk-modal-info-code">${currentSite.code}</span>
              <span class="pk-modal-info-name">${L(currentSite.name_th, currentSite.name_en)}</span>
            </div>
            <div class="pk-modal-info-meta">
              <span>🗂️ ${currentSite.zones.length} ${L('โซน','zones')}</span>
              <span>📋 ${currentSite.activeTasks} ${L('งาน','tasks')}</span>
              <span>📐 ${(currentSite.totalAreaM2/1000).toFixed(1)}k ${L('ตร.ม.','m²')}</span>
            </div>
          </div>
        </div>

        <div class="pk-modal-search">
          <div class="pk-modal-search-wrap">
            <span class="icon">🔍</span>
            <input id="pk-search-input" placeholder="${L('ค้นหาโซนใน','Search zones in')} ${currentSite.code}..." value="${state.pickerSearch||''}" autocomplete="off" />
            ${(state.pickerSearch||'') ? `<button class="clear" data-pk-search-clear="1">✕</button>` : ''}
          </div>
        </div>

        <div class="pk-modal-body">
          <div class="pk-modal-section-hdr">
            <span>${L('โซนใน','Zones in')} ${currentSite.code}</span>
            <span class="cnt">${zonesFiltered.length}</span>
          </div>
          ${zonesFiltered.length === 0 ?
            `<div class="pk-modal-empty">
              <div class="icon">🔎</div>
              <div class="title">${L('ไม่พบโซน','No zones')}</div>
              <div class="desc">${L('ลองค้นด้วยรหัสหรือชื่อโซน','Try a different search')}</div>
            </div>` :
            `<div class="pk-modal-zone-group">
              ${zonesFiltered.map(z => {
                const isOn = currentZoneCode === z.code;
                const zt = zoneTypeLabel(z.type);
                return `<div class="pk-modal-zone-row ${isOn?'on':''}" data-pk-modal-zone='${currentSite.code}|${z.code}'>
                  <div class="pk-modal-zone-icon">${z.icon}</div>
                  <div class="pk-modal-zone-body">
                    <div class="pk-modal-zone-line1">
                      <span class="pk-modal-zone-code">${z.code}</span>
                      <span class="pk-modal-zone-name">${L(z.name_th, z.name_en)}</span>
                    </div>
                    <div class="pk-modal-zone-desc">${L(z.desc_th, z.desc_en)}</div>
                    <div class="pk-modal-zone-tags">
                      <span class="pk-modal-zone-tag" style="background:${zt.bg}; color:${zt.color}">${L(zt.th, zt.en)}</span>
                      <span class="pk-modal-zone-tag tasks">📋 ${z.activeTasks} ${L('งาน','tasks')}</span>
                    </div>
                  </div>
                  <div class="pk-modal-zone-radio"></div>
                </div>`;
              }).join('')}
            </div>`
          }
        </div>

        <div class="pk-modal-foot">
          <button class="cancel" data-picker-close="1">${L('ยกเลิก','Cancel')}</button>
          <button class="confirm" data-picker-confirm="site" ${canConfirm?'':'disabled'}>
            ✓ ${L('ยืนยัน','Confirm')}
          </button>
        </div>

      </div>
    </div>
  `;
}

function renderWbsPicker(){
  // v33.0 · Bottom Sheet Modal (single view with L1 pills + L2/L3 grouped list)
  const q = (state.pickerSearch||'').toLowerCase();
  const pending = state.pickerPending || {};
  const currentL1Code = state.wbsPickerL1 || (state.createForm.wbsL3Code
    ? state.createForm.wbsL3Code.split('.')[0]
    : CT_WBS[0].l1);
  const currentL1 = CT_WBS.find(l => l.l1 === currentL1Code) || CT_WBS[0];
  const currentL3Code = pending.wbsL3Code || state.createForm.wbsL3Code || '';

  // Filter L3 items inside currentL1 by search (applies to code/name/refStd)
  const filteredL2 = currentL1.l2.map(l2 => {
    const l3s = l2.l3.filter(l3 => !q ||
      l3.code.toLowerCase().includes(q) ||
      l3.name_th.toLowerCase().includes(q) ||
      (l3.name_en||'').toLowerCase().includes(q) ||
      (l3.refStd||'').toLowerCase().includes(q));
    return { ...l2, l3: l3s };
  }).filter(l2 => l2.l3.length > 0);
  const totalL3 = filteredL2.reduce((s, l2) => s + l2.l3.length, 0);
  const canConfirm = !!pending.wbsL3Code;

  // Breadcrumb of current pending selection
  const bc = currentL3Code ? (() => {
    for(const l1 of CT_WBS) for(const l2 of l1.l2) for(const l3 of l2.l3) if(l3.code === currentL3Code) return { l1, l2, l3 };
    return null;
  })() : null;

  return `
    <div class="pk-modal-backdrop" data-pk-modal-backdrop="1">
      <div class="pk-modal-sheet" data-pk-modal-stop="1">
        <div class="pk-modal-handle"></div>

        <div class="pk-modal-header">
          <div class="h-body">
            <div class="h-title">🏗️ ${L('เลือก WBS / กิจกรรม','Pick WBS / Activity')}</div>
            <div class="h-sub">${L('เลือกหมวดใหญ่ก่อน แล้วเลือกกิจกรรม (L3)','Pick category then activity (L3)')}</div>
          </div>
          <button class="h-close" data-picker-close="1" aria-label="close">✕</button>
        </div>

        <div class="pk-wbsm-l1s">
          ${CT_WBS.map(l1 => {
            const isOn = currentL1Code === l1.l1;
            return `<button class="pk-wbsm-pill ${isOn?'on':''}" data-pk-wbsm-l1='${l1.l1}'>
              <span class="pk-wbsm-pill-icon" style="background:linear-gradient(135deg,${l1.color},${l1.color}dd)">${l1.icon}</span>
              <span class="pk-wbsm-pill-info">
                <span class="pk-wbsm-pill-code">L1 · ${l1.l1} · ${wbsCountL3(l1)} ${L('กิจกรรม','activities')}</span>
                <span class="pk-wbsm-pill-name">${L(l1.name_th, l1.name_en)}</span>
              </span>
            </button>`;
          }).join('')}
        </div>

        ${CT_WBS.length > 2 ? `<div class="pk-wbsm-scrollhint">
          <span class="arrow">↔</span>
          <span>${L('เลื่อนซ้าย-ขวา เพื่อดูหมวดหมู่ทั้งหมด','Scroll left-right to see all categories')}</span>
        </div>` : ''}

        <div class="pk-wbsm-info" style="background:linear-gradient(135deg,${currentL1.color},${currentL1.color}dd)">
          <div class="pk-wbsm-info-icon">${currentL1.icon}</div>
          <div class="pk-wbsm-info-body">
            <div class="pk-wbsm-info-line1">
              <span class="pk-wbsm-info-code">L1 · ${currentL1.l1}</span>
              <span class="pk-wbsm-info-name">${L(currentL1.name_th, currentL1.name_en)}</span>
            </div>
            <div class="pk-wbsm-info-meta">
              <span>📂 ${currentL1.l2.length} L2</span>
              <span>📋 ${wbsCountL3(currentL1)} ${L('กิจกรรม','activities')}</span>
              <span>⚙️ ${wbsCountActive(currentL1)} ${L('งานอยู่','active tasks')}</span>
            </div>
          </div>
        </div>

        <div class="pk-modal-search">
          <div class="pk-modal-search-wrap">
            <span class="icon">🔍</span>
            <input id="pk-search-input" placeholder="${L('ค้นหากิจกรรม · code · Ref Std...','Search activity · code · Ref Std...')}" value="${state.pickerSearch||''}" autocomplete="off" />
            ${(state.pickerSearch||'') ? `<button class="clear" data-pk-search-clear="1">✕</button>` : ''}
          </div>
        </div>

        <div class="pk-wbsm-guard">💡 ${L('เลือกได้เฉพาะ L3 (กิจกรรม) · Task ผูกที่ L3','L3 (activity) only · tasks link to L3')}</div>

        ${bc ? `<div class="pk-wbsm-breadcrumb" style="margin-top:10px">
          <span>${bc.l1.l1} · ${L(bc.l1.name_th, bc.l1.name_en)}</span>
          <span class="sep">›</span>
          <span>${bc.l2.l2} · ${L(bc.l2.name_th, bc.l2.name_en)}</span>
          <span class="sep">›</span>
          <span class="cur">${bc.l3.code}</span>
          <span>${L(bc.l3.name_th, bc.l3.name_en)}</span>
        </div>` : ''}

        <div class="pk-modal-body">
          ${totalL3 === 0 ?
            `<div class="pk-modal-empty">
              <div class="icon">🔎</div>
              <div class="title">${L('ไม่พบกิจกรรม','No activities')}</div>
              <div class="desc">${L('ลองค้นด้วยรหัสหรือชื่อกิจกรรม','Try activity code or name')}</div>
            </div>` :
            filteredL2.map(l2 => `
              <div class="pk-wbsm-l2hdr">
                <span class="code">${l2.l2}</span>
                <span class="name">${L(l2.name_th, l2.name_en)}</span>
                <span class="cnt">${l2.l3.length}</span>
              </div>
              <div class="pk-wbsm-l3group">
                ${l2.l3.map(l3 => {
                  const isOn = currentL3Code === l3.code;
                  const ps = wbsPlanStatusLabel(l3.planStatus);
                  return `<div class="pk-wbsm-l3row ${isOn?'on':''}" data-pk-wbsm-l3='${l3.code}'>
                    <div class="pk-wbsm-l3radio"></div>
                    <div class="pk-wbsm-l3body">
                      <div class="pk-wbsm-l3line1">
                        <span class="pk-wbsm-l3code">${l3.code}</span>
                        <span class="pk-wbsm-l3name">${L(l3.name_th, l3.name_en)}</span>
                      </div>
                      <div class="pk-wbsm-l3en">${state.lang==='th' ? l3.name_en : l3.name_th}</div>
                      <div class="pk-wbsm-l3tags">
                        <span class="pk-wbsm-l3tag ref">📘 ${l3.refStd||'-'}</span>
                        <span class="pk-wbsm-l3tag tasks">📋 ${l3.activeTasks||0} ${L('งาน','tasks')}</span>
                        <span class="pk-wbsm-l3tag" style="background:${ps.bg}; color:${ps.color}">${L(ps.th, ps.en)}</span>
                      </div>
                    </div>
                  </div>`;
                }).join('')}
              </div>
            `).join('')
          }
          <div style="height:12px"></div>
        </div>

        <div class="pk-modal-foot">
          <button class="cancel" data-picker-close="1">${L('ยกเลิก','Cancel')}</button>
          <button class="confirm" data-picker-confirm="wbs" ${canConfirm?'':'disabled'}>
            ✓ ${L('ยืนยัน','Confirm')}
          </button>
        </div>

      </div>
    </div>
  `;
}

function renderPersonPicker(role){
  const q = (state.pickerSearch||'').toLowerCase();
  const sortKey = state.pickerSort || 'workload';
  const pending = state.pickerPending || {};
  const list = role === 'inspector' ? CT_INSPECTORS : CT_APPROVERS;
  const label = role === 'inspector' ? L('ผู้ตรวจสอบคุณภาพงาน','QC Inspector') : L('ผู้อนุมัติ','Approver');
  const sub = role === 'inspector'
    ? L('แสดงคนใน role QC Inspector','QC Inspector role')
    : L('แสดง QC Manager + Project Manager','QC Manager + Project Manager');
  const currentEmail = pending.email
    || (role === 'inspector' ? state.createForm.inspectorEmail : state.createForm.approverEmail)
    || '';
  const canConfirm = !!pending.email;
  // Filter
  const filtered = list.filter(p => !q ||
    p.name_th.toLowerCase().includes(q) ||
    (p.name_en||'').toLowerCase().includes(q) ||
    p.role.toLowerCase().includes(q) ||
    p.email.toLowerCase().includes(q));
  // Sort
  const sorted = [...filtered];
  if(sortKey === 'workload') sorted.sort((a,b) => a.activeTasks - b.activeTasks);
  else if(sortKey === 'name') sorted.sort((a,b) => a.name_th.localeCompare(b.name_th));
  else if(sortKey === 'availability') sorted.sort((a,b) => (a.overdue - b.overdue) || (a.activeTasks - b.activeTasks));
  const sortChips = [
    ['workload', L('Workload ต่ำ→สูง','Workload ↑')],
    ['name',     L('ตามชื่อ','Name A→Z')],
    ['availability', L('ว่างที่สุด','Most available')]
  ];
  return `
    <div class="picker-overlay">
      <div class="picker-sheet picker-sheet-v25">
        <div class="picker-head">
          <button class="back" data-picker-close="1">←</button>
          <div>
            <div class="title">${role==='inspector'?'🔍':'✅'} ${L('เลือก','Pick')} ${label}</div>
            <div class="title-sub">${sub}</div>
          </div>
        </div>
        ${pkSearchBar(L('ค้นหาชื่อ · role · email...','Search name · role · email...'))}
        <div class="pk-sort">
          ${sortChips.map(([k,lbl]) => `<button class="pk-sort-chip ${sortKey===k?'on':''}" data-pk-sort='${k}'>${lbl}</button>`).join('')}
        </div>
        <div class="pk-count">${L('พบ','Found')} ${filtered.length}/${list.length} ${L('คน','people')}</div>
        <div class="picker-body">
          ${sorted.length === 0 ? pkEmpty(L('ลองค้นด้วยชื่อ · role · หรือ email','Try name, role, or email')) :
            sorted.map(p => {
              const isOn = currentEmail === p.email;
              const wl = workloadLevel(p.activeTasks);
              return `<div class="pk-person ${isOn?'on':''}" data-pk-person='${role}|${p.email}'>
                <span class="pk-avatar">${p.avatar}</span>
                <span class="pk-person-info">
                  <span class="pk-person-name">${L(p.name_th, p.name_en)}</span>
                  <span class="pk-person-meta">
                    <span>${p.role}</span>
                    <span class="pk-workload ${wl}">📋 ${p.activeTasks} ${L('งาน','tasks')}</span>
                    <span>⏰ ${L('ว่างถัดไป','Free')}: ${p.nextFree}</span>
                    ${p.overdue > 0 ? `<span style="color:var(--error-dark);font-weight:800">⚠ ${L('เลย','overdue')} ${p.overdue}</span>` : ''}
                  </span>
                </span>
                <span class="radio"></span>
              </div>`;
            }).join('')}
        </div>
        <div class="picker-foot">
          <button class="cancel" data-picker-close="1">${L('ยกเลิก','Cancel')}</button>
          <button class="confirm" data-picker-confirm="${role}" ${canConfirm?'':'disabled'}>
            ✓ ${L('ยืนยันเลือกคนนี้','Confirm this person')}
          </button>
        </div>
      </div>
    </div>
  `;
}

/* ============== FAB + TAB BAR ============== */
function renderFab(){
  const fab = document.getElementById('fab');
  const ico = document.getElementById('fabIco');
  const f = FAB_BY_ROLE[state.role];
  fab.className = 'fab ' + state.role;
  ico.textContent = f.ico;
  // Hide FAB on some screens
  fab.style.display = ['list', 'detail'].includes(state.screen) ? 'flex' : 'none';
  fab.onclick = () => {
    if(f.goto){
      navigate(f.goto);
    } else if(state.role === 'inspector' && state.screen === 'detail'){
      navigate('checklist');
    } else {
      showToast(L(f.th, f.en));
    }
  };
}

function renderTabBar(){
  const bar = document.getElementById('tabBar');
  // v7.0 — hide tab-bar on form screens (so submit-bar at bottom is visible)
  const formScreens = ['ncrCreate', 'submit', 'create', 'checklist', 'ownerPick'];
  bar.style.display = formScreens.includes(state.screen) ? 'none' : 'grid';
  const tabs = TABS_BY_ROLE[state.role];
  bar.innerHTML = tabs.map(t => {
    const [ic, th, en, _, on, bdg] = t;
    const onCls = on ? ' on' : '';
    const bdgHtml = bdg ? `<span class="t-bdg">${bdg}</span>` : '';
    return `<button class="tab${onCls}"><span class="t-ic">${ic}</span><span class="t-tx">${L(th, en)}</span>${bdgHtml}</button>`;
  }).join('');
}

/* ============================================================
   EVENT DELEGATION
   ============================================================ */
// v23.0 — Widget input listeners (number/text/longtext/date/color)
document.addEventListener('input', (ev) => {
  const t = ev.target;
  const w = t.getAttribute && t.getAttribute('data-ckw-widget');
  if(!w) return;
  const code = t.getAttribute('data-code');
  if(!code) return;
  if(!state.cklAnswers) state.cklAnswers = {};
  if(w === 'number' || w === 'text' || w === 'longtext' || w === 'date'){
    state.cklAnswers[code] = t.value;
    state.cklSet[code] = t.value ? 'answered' : undefined;
  } else if(w === 'color'){
    state.cklAnswers[code] = t.value;
    state.cklSet[code] = t.value ? 'answered' : undefined;
    // Update swatch background without full re-render
    const chip = t.parentElement.querySelector('.ckw-color-chip');
    if(chip && /^#[0-9a-f]{3,6}$/i.test(t.value)) chip.style.background = t.value;
  }
});
document.addEventListener('change', (ev) => {
  const t = ev.target;
  const w = t.getAttribute && t.getAttribute('data-ckw-widget');
  if(!w) return;
  const code = t.getAttribute('data-code');
  if(!code) return;
  if(!state.cklAnswers) state.cklAnswers = {};
  if(w === 'radio'){
    state.cklAnswers[code] = t.value;
    state.cklSet[code] = 'answered';
    render();
  } else if(w === 'checkbox'){
    const boxes = document.querySelectorAll(`[data-ckw-widget="checkbox"][data-code="${code}"]`);
    const picked = Array.from(boxes).filter(b=>b.checked).map(b=>b.value);
    state.cklAnswers[code] = picked;
    state.cklSet[code] = picked.length > 0 ? 'answered' : undefined;
    render();
  }
});
// v23.0 — Widget click listener (photo/signature buttons)
// v25.0 — Live search input (debounced-lite via 'input' event)
document.addEventListener('input', function(e){
  if(e.target && e.target.id === 'pk-search-input'){
    state.pickerSearch = e.target.value;
    // Re-render, but preserve focus + caret
    const caret = e.target.selectionStart;
    render();
    const el = document.getElementById('pk-search-input');
    if(el){
      el.focus();
      try { el.setSelectionRange(caret, caret); } catch(_){}
    }
  }
});

document.addEventListener('click', (ev) => {
  const t = ev.target.closest && ev.target.closest('[data-ckw-widget]');
  if(!t) return;
  const w = t.getAttribute('data-ckw-widget');
  const code = t.getAttribute('data-code');
  if(!code) return;
  if(w === 'photo'){
    if(!state.cklAnswers) state.cklAnswers = {};
    state.cklAnswers[code] = 'photo-attached';
    state.cklSet[code] = 'answered';
    showToast(L('เพิ่มรูปแล้ว','Photo added'));
    render();
  } else if(w === 'signature'){
    if(!state.cklAnswers) state.cklAnswers = {};
    if(state.cklAnswers[code]){
      state.cklAnswers[code] = '';
      state.cklSet[code] = undefined;
    } else {
      state.cklAnswers[code] = 'signed-' + Date.now();
      state.cklSet[code] = 'answered';
    }
    render();
  }
}, true);

document.addEventListener('click', (e) => {
  const target = e.target;

  // v5.0 — Lang toggle in screen-head (buttons with data-act="lang")
  const langBtn = target.closest('[data-act="lang"]');
  if(langBtn){
    const val = langBtn.dataset.val;
    if(val && (val === 'th' || val === 'en') && val !== state.lang){
      state.lang = val;
      render();
    }
    return;
  }

  // Lang/Role chip in page-head (legacy — kept for compatibility)
  const ctlChip = target.closest('.ctl-chip');
  if(ctlChip){
    const act = ctlChip.dataset.act;
    const val = ctlChip.dataset.val;
    if(act === 'lang'){
      state.lang = val;
      document.querySelectorAll('.ctl-chip[data-act="lang"]').forEach(c => c.classList.toggle('on', c.dataset.val === val));
      render();
    } else if(act === 'role'){
      state.role = val;
      document.querySelectorAll('.ctl-chip[data-act="role"]').forEach(c => c.classList.toggle('on', c.dataset.val === val));
      // Reset to list when changing role
      state.screen = 'list';
      state.history = [];
      render();
    }
    return;
  }

  // Role chip in role-bar
  const rChip = target.closest('.r-chip');
  if(rChip){
    state.role = rChip.dataset.role;
    document.querySelectorAll('.ctl-chip[data-act="role"]').forEach(c => c.classList.toggle('on', c.dataset.val === state.role));
    state.screen = 'list';
    state.history = [];
    render();
    return;
  }

  // Back button
  const backBtn = target.closest('[data-act="back"]');
  if(backBtn){
    e.preventDefault();
    e.stopPropagation();
    backNav();
    return;
  }

  // Goto
  const gotoEl = target.closest('[data-goto]');
  if(gotoEl){
    try{
      const params = JSON.parse(gotoEl.dataset.goto);
      const screen = params.screen || state.screen;
      delete params.screen;
      navigate(screen, params);
    } catch(err){ console.error(err); }
    return;
  }

  // Task card
  const tCard = target.closest('.t-card');
  if(tCard){
    const code = tCard.dataset.task;
    navigate('detail', {taskCode: code, tab: 'overview'});
    return;
  }

  // Filter chip
  const fChip = target.closest('.f-chip');
  if(fChip){
    state.filter = fChip.dataset.f;
    render();
    return;
  }

  // Tab switch
  const tabBtn = target.closest('.tabs-nav button');
  if(tabBtn){
    state.tab = tabBtn.dataset.tab;
    render();
    return;
  }

  // Toast action
  const toastEl = target.closest('[data-toast]');
  if(toastEl){
    showToast(toastEl.dataset.toast);
    return;
  }

  // Specific actions
  // v10.0 — Specific [data-act] handlers (must run BEFORE the generic catch-all)
  // Open owner calendar picker
  const openOpEl = target.closest('[data-act="open-owner-pick"]');
  if(openOpEl){
    e.preventDefault();
    if(typeof ncrCreateSyncForm === 'function') ncrCreateSyncForm();
    navigate('ownerPick');
    return;
  }
  // Pick owner from calendar picker
  const pickOpEl = target.closest('[data-act="pick-owner"]');
  if(pickOpEl){
    if(!state.nForm) state.nForm = {};
    state.nForm.owner = pickOpEl.dataset.owner;
    showToast(L('เลือกผู้รับผิดชอบเรียบร้อย','Owner selected'));
    setTimeout(() => back(), 500);
    return;
  }
  // Stop-Work toggle (inside Create-NCR form)
  const swEl = target.closest('[data-act="toggle-sw"]');
  if(swEl){
    if(!state.nForm) state.nForm = {};
    state.nForm.stopWork = !state.nForm.stopWork;
    if(typeof ncrCreateSyncForm === 'function') ncrCreateSyncForm();
    render();
    return;
  }
  // Add photo placeholder
  const addPh = target.closest('[data-act="add-photo"]');
  if(addPh){
    if(!state.nForm) state.nForm = {};
    state.nForm.beforePhotos = (state.nForm.beforePhotos || 1) + 1;
    if(typeof ncrCreateSyncForm === 'function') ncrCreateSyncForm();
    render();
    return;
  }

  const actAttr = target.closest('[data-act]');
  if(actAttr){
    const act = actAttr.dataset.act;
    /* v36.0 — QCM direct approve · disabled unless Pass Rate 100% (gate at render time) */
    if(act === 'qcm-direct-approve'){
      const t = TASKS.find(x => x.code === state.taskCode);
      if(t) t.state = 'done';
      showToast(L('อนุมัติเรียบร้อย · Task → เสร็จสิ้น (DONE) ✓','Approved · Task → DONE ✓'));
      setTimeout(() => { state.history = []; navigate('list'); }, 1400);
      return;
    }
    /* v37.0 — Open Reassign Modal (task-scoped · from "ส่งกลับให้ตรวจซ้ำ") */
    if(act === 'open-reassign-task-modal'){
      state.reassignModal = { context: 'task' };
      render();
      return;
    }
    /* v37.0 — Open Reassign Modal (NCR-scoped · from NCR Detail "มอบหมายใหม่") */
    if(act === 'open-reassign-ncr-modal'){
      const ncrId = actAttr.dataset.ncr || state.ncrId;
      state.reassignModal = { context: 'ncr', ncrId: ncrId };
      render();
      return;
    }
    /* v40.0 — Close Reassign Modal · works reliably from both:
       (a) X button (.rm-close) · guaranteed close
       (b) backdrop overlay (.rm-overlay direct target) · click outside to close
       Clicks inside the sheet body (empty area) are ignored so user can browse. */
    if(act === 'close-reassign-modal'){
      const clickedBackdrop = target.classList.contains('rm-overlay');
      const clickedCloseBtn = target.classList.contains('rm-close') || (target.closest && target.closest('.rm-close'));
      if(!clickedBackdrop && !clickedCloseBtn) return; // clicked inside sheet — ignore
      e.preventDefault();
      e.stopPropagation();
      state.reassignModal = null;
      render();
      return;
    }
    /* v41.0 — Pick inspector · task→assigned · pin top · toast (task or NCR context) */
    if(act === 'pick-reassign-inspector'){
      const email = actAttr.dataset.email;
      const t = TASKS.find(x => x.code === state.taskCode);
      const insp = email ? (typeof CT_INSPECTORS !== 'undefined' ? CT_INSPECTORS.find(p => p.email === email) : null) : null;
      const modal = state.reassignModal;
      if(t && insp){
        const nm = L(insp.name_th, insp.name_en);
        t.state = 'assigned';
        t.inspector = nm;
        /* NCR context (v41.0 fix): only change n.inspector, keep n.owner (Sub Contractor) intact.
           Also send explicit notification message. */
        if(modal && modal.context === 'ncr' && modal.ncrId && NCRS[modal.ncrId]){
          const n = NCRS[modal.ncrId];
          n.inspector = nm;              /* new QC Inspector display name */
          /* Do NOT overwrite n.owner (the Sub Contractor doing the fix stays the same) */
        }
        state.pinnedTaskCode = t.code;
        state.reassignSentNotif = nm;   /* v41.0 · list header shows badge */
        const ctxIsNcr = modal && modal.context === 'ncr';
        showToast(L(
          ctxIsNcr
            ? `🔔 เปลี่ยน Inspector เป็น ${nm} · ส่ง Notification แจ้งเตือนแล้ว`
            : `มอบหมายให้ ${nm} · Task → มอบหมายแล้ว · 🔔 ส่ง Notification แล้ว`,
          ctxIsNcr
            ? `🔔 Inspector changed to ${nm} · Notification sent`
            : `Assigned to ${nm} · Task → ASSIGNED · 🔔 Notification sent`
        ));
      }
      state.reassignModal = null;
      setTimeout(() => {
        state.history = [];
        state.screen = 'list';
        render();
      }, 1300);
      return;
    }
    /* v42.0 — Open Combined Edit + Reassign NCR Modal (QCM only) from NCR Detail */
    if(act === 'open-edit-ncr-modal'){
      const ncrId = actAttr.dataset.ncr || state.ncrId;
      if(ncrId && NCRS[ncrId]){
        state.editNcrModal = {
          ncrId: ncrId,
          tempCorrectTh: null,   /* null = use NCR's current value */
          tempCorrectEn: null,
          tempOwnerEmail: null,  /* null = keep current owner */
          tempDue: null,
          ownerDropdownOpen: false   /* v43.0 · dropdown state */
        };
        render();
      }
      return;
    }
    /* v43.0 — Toggle owner dropdown open/close · persist textareas before re-render */
    if(act === 'toggle-edit-ncr-owner-dropdown'){
      e.preventDefault();
      e.stopPropagation();
      if(!state.editNcrModal) return;
      const thEl = document.getElementById('en-input-th');
      const enEl = document.getElementById('en-input-en');
      const dueEl = document.getElementById('en-input-due');
      if(thEl)  state.editNcrModal.tempCorrectTh = thEl.value;
      if(enEl)  state.editNcrModal.tempCorrectEn = enEl.value;
      if(dueEl) state.editNcrModal.tempDue = dueEl.value;
      state.editNcrModal.ownerDropdownOpen = !state.editNcrModal.ownerDropdownOpen;
      render();
      return;
    }
    /* v42.0 — Close Combined Edit Modal · backdrop or ✕ or Cancel */
    if(act === 'close-edit-ncr-modal'){
      const clickedBackdrop = target.classList.contains('en-overlay');
      const clickedCloseBtn = target.classList.contains('en-close') || (target.closest && target.closest('.en-close'));
      const clickedGhostBtn = target.classList.contains('en-btn-ghost') || (target.closest && target.closest('.en-btn-ghost'));
      if(!clickedBackdrop && !clickedCloseBtn && !clickedGhostBtn) return;
      e.preventDefault();
      e.stopPropagation();
      /* Persist textarea/date values before closing so re-open shows what was typed */
      if(state.editNcrModal){
        const thEl = document.getElementById('en-input-th');
        const enEl = document.getElementById('en-input-en');
        const dueEl = document.getElementById('en-input-due');
        if(thEl)  state.editNcrModal.tempCorrectTh = thEl.value;
        if(enEl)  state.editNcrModal.tempCorrectEn = enEl.value;
        if(dueEl) state.editNcrModal.tempDue = dueEl.value;
      }
      state.editNcrModal = null;
      render();
      return;
    }
    /* v43.0 — Pick owner in dropdown · sets selection + closes dropdown */
    if(act === 'pick-edit-ncr-owner'){
      e.preventDefault();
      e.stopPropagation();
      if(!state.editNcrModal) return;
      /* Persist textarea values before re-render so they don't reset */
      const thEl = document.getElementById('en-input-th');
      const enEl = document.getElementById('en-input-en');
      const dueEl = document.getElementById('en-input-due');
      if(thEl)  state.editNcrModal.tempCorrectTh = thEl.value;
      if(enEl)  state.editNcrModal.tempCorrectEn = enEl.value;
      if(dueEl) state.editNcrModal.tempDue = dueEl.value;
      state.editNcrModal.tempOwnerEmail = actAttr.dataset.email;
      state.editNcrModal.ownerDropdownOpen = false;   /* v43.0 · auto-close after selection */
      render();
      return;
    }
    /* v42.0 — Save Combined Edit · update NCR (correct + owner + due) + toast */
    if(act === 'save-edit-ncr'){
      e.preventDefault();
      e.stopPropagation();
      const ncrId = actAttr.dataset.ncr || (state.editNcrModal && state.editNcrModal.ncrId);
      const n = ncrId ? NCRS[ncrId] : null;
      if(n){
        const thEl = document.getElementById('en-input-th');
        const enEl = document.getElementById('en-input-en');
        const dueEl = document.getElementById('en-input-due');
        if(thEl)  n.correctTh = thEl.value;
        if(enEl)  n.correctEn = enEl.value;
        if(dueEl && dueEl.value){
          n._dueIso = dueEl.value;
          /* Also update the human-readable n.due string */
          try{
            const d = new Date(dueEl.value + 'T17:00:00');
            const thMonths = ['ม.ค.','ก.พ.','มี.ค.','เม.ย.','พ.ค.','มิ.ย.','ก.ค.','ส.ค.','ก.ย.','ต.ค.','พ.ย.','ธ.ค.'];
            n.due = state.lang === 'th'
              ? `${d.getDate()} ${thMonths[d.getMonth()]} 17:00`
              : d.toLocaleDateString('en-US', {day:'numeric', month:'short'}) + ' 17:00';
          } catch(err) { n.due = dueEl.value; }
        }
        /* Owner reassignment (Sub Contractor) */
        const email = state.editNcrModal && state.editNcrModal.tempOwnerEmail;
        let ownerChanged = false;
        if(email && typeof CT_SUBS !== 'undefined'){
          const sub = CT_SUBS.find(p => p.email === email);
          if(sub){
            n.owner = L(sub.name_th, sub.name_en);
            n._ownerEmail = email;
            ownerChanged = true;
          }
        }
        const parts = [
          L('แนวทางแก้ไข','Corrective'),
          ownerChanged ? L('ผู้รับผิดชอบ','Owner') : null,
          L('วันกำหนดแก้','Due')
        ].filter(Boolean).join(' · ');
        showToast(L(
          `บันทึก ${n.id} แล้ว · ${parts} · 🔔 ส่ง Notification แจ้ง Sub + Inspector`,
          `Saved ${n.id} · ${parts} · 🔔 Notified Sub + Inspector`
        ));
      }
      state.editNcrModal = null;
      render();
      return;
    }
    /* v41.0 — Open Edit Corrective Modal (QCM only) from NCR Detail */
    if(act === 'open-edit-corrective-modal'){
      const ncrId = actAttr.dataset.ncr || state.ncrId;
      if(ncrId && NCRS[ncrId]){
        state.editCorrectiveModal = { ncrId: ncrId };
        render();
      }
      return;
    }
    /* v41.0 — Close Edit Corrective Modal · backdrop or ✕ or Cancel button */
    if(act === 'close-edit-corrective-modal'){
      const clickedBackdrop = target.classList.contains('ec-overlay');
      const clickedCloseBtn = target.classList.contains('ec-close') || (target.closest && target.closest('.ec-close'));
      const clickedGhostBtn = target.classList.contains('ec-btn-ghost') || (target.closest && target.closest('.ec-btn-ghost'));
      if(!clickedBackdrop && !clickedCloseBtn && !clickedGhostBtn) return;
      e.preventDefault();
      e.stopPropagation();
      state.editCorrectiveModal = null;
      render();
      return;
    }
    /* v41.0 — Save Edit Corrective · read textarea → update NCR + toast (notification) */
    if(act === 'save-edit-corrective'){
      e.preventDefault();
      e.stopPropagation();
      const ncrId = actAttr.dataset.ncr || (state.editCorrectiveModal && state.editCorrectiveModal.ncrId);
      const n = ncrId ? NCRS[ncrId] : null;
      if(n){
        const thEl = document.getElementById('ec-input-th');
        const enEl = document.getElementById('ec-input-en');
        if(thEl) n.correctTh = thEl.value;
        if(enEl) n.correctEn = enEl.value;
        showToast(L(
          `บันทึกแนวทางแก้ไข ${n.id} แล้ว · 🔔 ส่ง Notification แจ้ง Sub + Inspector`,
          `Saved corrective for ${n.id} · 🔔 Notified Sub + Inspector`
        ));
      }
      state.editCorrectiveModal = null;
      render();
      return;
    }
    /* v35.0 — QCM Approve summary handlers (kept for backward-compat · not reachable from v36.0 UI) */
    if(act === 'qcm-approve-save'){
      /* Persist optional note first */
      const noteEl = document.getElementById('qcm-note');
      if(noteEl) state.qcmNote = noteEl.value;

      /* Re-compute counts to guard the save */
      const items = (typeof ALL_ITEMS !== 'undefined' && Array.isArray(ALL_ITEMS)) ? ALL_ITEMS : [];
      const ck = state.cklSet || {};
      let failCnt=0, pendingCnt=0;
      items.forEach(it => {
        const v = ck[it.code];
        if(v === 'fail') failCnt++;
        else if(v !== 'pass' && v !== 'answered' && v !== 'warn') pendingCnt++;
      });
      const openNcrCount = (typeof NCRS === 'object' && NCRS)
        ? Object.values(NCRS).filter(n => {
            const t = TASKS.find(x => x.code === state.taskCode);
            return n && t && n.taskCode === t.code && n.status !== 'closed';
          }).length
        : 0;

      if(failCnt > 0 || pendingCnt > 0 || openNcrCount > 0){
        state.qcmModal = 'alert';   /* block save · show red alert */
      } else {
        state.qcmModal = 'confirm'; /* all-clear · show green confirm */
      }
      render();
      return;
    }
    if(act === 'qcm-alert-close'){
      state.qcmModal = null;
      render();
      return;
    }
    if(act === 'qcm-confirm-cancel'){
      state.qcmModal = null;
      render();
      return;
    }
    if(act === 'qcm-confirm-ok'){
      state.qcmModal = null;
      const t = TASKS.find(x => x.code === state.taskCode);
      if(t) t.state = 'done';
      showToast(L('อนุมัติเรียบร้อย · Task → DONE ✓','Approved · Task → DONE ✓'));
      setTimeout(() => {
        state.history = [];
        state.qcmNote = '';
        navigate('list');
      }, 1400);
      return;
    }
    /* v39.0 — Inspector completes checklist · fires t-8 (in_progress → review) */
    if(act === 'submit-checklist'){
      const t = TASKS.find(x => x.code === state.taskCode);
      if(t) t.state = 'review';   /* t-8 pass */
      showToast(L('ส่งผลการตรวจเรียบร้อย · เปิดหน้าเซ็นรับรอง','Inspection submitted · opening signature'));
      setTimeout(() => {
        showToast(L('Task → REVIEW · ส่งให้ QC Manager แล้ว','Task → REVIEW · sent to QC Manager'));
        setTimeout(() => {
          state.pinnedTaskCode = t ? t.code : null;
          state.history = [];
          navigate('list');
        }, 1500);
      }, 1800);
    /* v39.0 — Sub submits fix · fires t-5 (ncr_fixing → ncr_verify) */
    } else if(act === 'submit-resolution'){
      const n = NCRS[state.ncrId];
      const t = TASKS.find(x => x.code === state.taskCode);
      if(n) n.status = 'verify';
      if(t) t.state = 'ncr_verify';    /* t-5 pass */
      showToast(L('ส่งผลแก้ไขเรียบร้อย · Task → NCR_VERIFY','Submitted · Task → NCR_VERIFY'));
      setTimeout(() => {
        state.pinnedTaskCode = t ? t.code : null;
        state.history = [];
        navigate('list');
      }, 1500);
    /* v39.0 — Inspector approves NCR fix · fires t-7 (ncr_verify → in_progress) · NCR auto-closes */
    } else if(act === 'ncr-pass'){
      const n = NCRS[state.ncrId];
      const t = TASKS.find(x => x.code === state.taskCode);
      if(n) n.status = 'closed';
      if(t) t.state = 'in_progress';   /* t-7 pass · NCR auto-closed */
      showToast(L('ปิด NCR เรียบร้อย · Task → IN_PROGRESS ✓','NCR closed · Task → IN_PROGRESS ✓'));
      setTimeout(() => backNav(), 1200);
    /* v39.0 — Inspector rejects NCR fix · fires t-6 (ncr_verify → ncr_fixing) · NCR → fixing */
    } else if(act === 'ncr-reject'){
      const n = NCRS[state.ncrId];
      const t = TASKS.find(x => x.code === state.taskCode);
      if(n) n.status = 'fixing';   /* was 'open' in v38 · workflow says goes to fixing */
      if(t) t.state = 'ncr_fixing';    /* t-6 fail */
      showToast(L('ส่งกลับให้ Sub แก้ใหม่ · Task → NCR_FIXING','Sent back to Sub · Task → NCR_FIXING'));
      setTimeout(() => backNav(), 1200);
    } else if(act === 'task-created'){
      showToast(L('สร้าง Task เรียบร้อย · ส่ง Notification ให้ Inspector','Task created · Inspector notified'));
      setTimeout(() => { state.history = []; navigate('list'); }, 1500);
    } else if(act === 'create-ncr-submit'){
      // v6.0 — Submit new NCR
      const ctx = state.ncrCreateContext || {};
      const f = state.nForm || {};
      // Sync inputs
      const titleEl = document.getElementById('nf-title');
      const descEl = document.getElementById('nf-desc');
      const rootEl = document.getElementById('nf-root');
      const corrEl = document.getElementById('nf-corr');
      const ownerEl = document.getElementById('nf-owner');
      const dueEl = document.getElementById('nf-due');
      if(titleEl) f.title = titleEl.value.trim();
      if(descEl) f.desc = descEl.value.trim();
      if(rootEl) f.rootCause = rootEl.value.trim();
      if(corrEl) f.corrective = corrEl.value.trim();
      if(ownerEl) f.owner = ownerEl.value;
      if(dueEl) f.due = dueEl.value;
      // Validate required
      if(!f.title){ showToast(L('กรุณากรอกหัวข้อ NCR','Please enter NCR title')); return; }
      if(!f.desc){ showToast(L('กรุณากรอกรายละเอียดข้อบกพร่อง','Please enter description')); return; }
      // Generate new NCR
      const nextNum = String(Math.max(...Object.keys(NCRS).map(k => parseInt(k.slice(-4))).filter(n => !isNaN(n))) + 1).padStart(4, '0');
      const newId = 'NCR-2026-' + nextNum;
      const ownerMap = {
        somchai: { th:'ผรช.สมชาย จันทร์เพ็ญ', en:'Foreman Somchai J.' },
        anucha:  { th:'ผรช.อนุชา ไฟฟ้า', en:'Foreman Anucha (Electrical)' },
        apinya:  { th:'อภินยา วงศ์สุข (วิศวกร)', en:'Apinya W. (Engineer)' },
      };
      const own = ownerMap[f.owner] || ownerMap.somchai;
      const sevMap = { crit:'crit', high:'high', med:'med', low:'low' };
      const slaMap = { crit:L('≤ 24 ชม.','≤ 24h'), high:L('≤ 3 วัน','≤ 3d'), med:L('≤ 7 วัน','≤ 7d'), low:L('≤ 14 วัน','≤ 14d') };
      NCRS[newId] = {
        id:newId, sev:sevMap[f.sev], status:'fixing', taskCode:ctx.taskCode || 'TQ-2026-050',   /* v39.0 · t-4 auto · Sub receives */
        item:ctx.itemCode, titleTh:f.title, titleEn:f.title,
        descTh:f.desc, descEn:f.desc,
        sizeTh:'—', sizeEn:'—',
        locTh:'—', locEn:'—',
        std:'—',
        inspector:L('คิตติศักดิ์ ช.','Kittisak C.'),
        owner: state.lang==='th' ? own.th : own.en,
        due: f.due,
        rootCauseTh: f.rootCause || '—',
        rootCauseEn: f.rootCause || '—',
        correctTh: f.corrective || '—',
        correctEn: f.corrective || '—',
        before: f.beforePhotos || 1, after: 0,
        stopWork: !!f.stopWork,
        sla: slaMap[f.sev],
      };
      // Update task · v39.0 · fire t-3 (in_progress → ncr_open) then auto-chain t-4 → ncr_fixing
      const t = TASKS.find(x => x.code === (ctx.taskCode || state.taskCode));
      if(t){
        t.ncrCount = (t.ncrCount || 0) + 1;
        t.ncrs = t.ncrs || [];
        t.ncrs.push(newId);
        if(t.state === 'in_progress' || t.state === 'ncr_open'){
          t.state = 'ncr_fixing';   /* t-3 fail + t-4 auto (Sub already picked in owner field) */
        }
      }
      // Clear form
      state.nForm = null;
      state.ncrCreateContext = null;
      showToast(L('สร้าง NCR ' + newId + ' เรียบร้อย · Task → NCR_FIXING · Sub รับ NCR แล้ว', 'Created ' + newId + ' · Task → NCR_FIXING · Sub notified'));
      setTimeout(() => {
        // Go to detail tab=ncr
        const code = t ? t.code : 'TQ-2026-050';
        state.history = [];
        navigate('detail', { taskCode: code, tab: 'ncr' });
      }, 1500);
    }
    return;
  }

  // Checklist item toggle (expand/collapse)
  const cklToggle = target.closest('[data-ckl-toggle]');
  if(cklToggle){
    const id = cklToggle.dataset.cklToggle;
    if(!state.cklExpanded) state.cklExpanded = new Set();
    if(state.cklExpanded.has(id)) state.cklExpanded.delete(id);
    else state.cklExpanded.add(id);
    e.stopPropagation();
    render();
    return;
  }

  // v17.0 — Pass/Fail/Skip on checklist (wizard mode) with NCR confirm dialog
  const pf = target.closest('.pf-btn');
  if(pf){
    const [code, val] = pf.dataset.pf.split('|');
    if(!state.cklSet) state.cklSet = {};
    ckwSyncComment();
    if(val === 'fail'){
      // v17.0 — DO NOT mark fail yet; open Confirm modal first
      const itemLabels = {
        'P-A01': L('การกำหนดตำแหน่งเสาเข็มตรงตามแบบ','Pile positioning'),
        'P-A02': L('ความลึกเสาเข็มถึงชั้นรับน้ำหนัก','Pile depth to bearing'),
        'P-A03': L('Pile Load Test ผ่านเกณฑ์','Pile Load Test'),
        'P-A04': L('ระบบระบายน้ำรอบฐานราก','Drainage'),
        'P-B01': L('ขนาดและชนิดเหล็กในเสาเข็ม','Rebar size and type'),
        'P-B02': L('Pile Integrity Test (PIT)','PIT Test'),
        'P-B03': L('Mill Certificate ของเหล็กเสริม','Mill Certificate'),
      };
      state.ncrConfirm = { code, label: itemLabels[code] || code };
      render();
    } else {
      state.cklSet[code] = val;
      render();
    }
    return;
  }

  // v18.0 — Backdrop click on overlay (clicking on dark area outside the card)
  if(state.ncrConfirm && target.classList && target.classList.contains('ncr-confirm-overlay')){
    state.ncrConfirm = null;
    render();
    return;
  }

  // v18.0 — NCR confirm dialog button actions (cancel / confirm)
  const ncrCfm = target.closest('[data-ncr-cfm]');
  if(ncrCfm){
    const action = ncrCfm.dataset.ncrCfm;
    const cfm = state.ncrConfirm;
    if(action === 'confirm' && cfm){
      // Commit fail status + open Create NCR screen
      state.cklSet[cfm.code] = 'fail';
      const t = TASKS.find(x => x.code === state.taskCode);
      state.ncrCreateContext = {
        taskCode: state.taskCode || (t && t.code),
        itemCode: cfm.code,
        itemLabel: cfm.label,
      };
      state.nForm = null;
      state.ncrConfirm = null;
      navigate('ncrCreate');
    } else {
      // cancel — drop modal · do NOT commit fail status
      state.ncrConfirm = null;
      render();
    }
    return;
  }

  // v21.0 — Tab strip click (jump to a section)
  const ckwTab = target.closest('[data-ckw-tab]');
  if(ckwTab){
    ckwSyncComment();
    state.ckSectionIdx = parseInt(ckwTab.dataset.ckwTab);
    state.cklIdx = 0;
    render();
    return;
  }

  // v24.0 — Task Code Auto/Manual toggle
  const ctCode = target.closest('[data-ct-code]');
  if(ctCode){
    const mode = ctCode.dataset.ctCode;
    state.createForm.codeMode = mode;
    if(mode === 'auto') state.createForm.code = 'TQ-2026-061';
    render();
    return;
  }
  // v24.0 — Open picker (project/site/wbs/inspector/approver)
  const openPicker = target.closest('[data-open-picker]');
  if(openPicker){
    // Sync current form inputs before showing picker
    syncCreateFormInputs();
    state.showPicker = openPicker.dataset.openPicker;
    state.pickerPending = null;
    // v25.0 — reset search + sort default per picker
    state.pickerSearch = '';
    state.pickerSort = 'workload';
    // v26.0 — reset project filter
    state.projectFilter = 'all';
    // v30.0 — Site/Zone: if already picked, jump to step 2, else step 1
    if(state.showPicker === 'site'){
      const existing = state.createForm.siteCode;
      state.sitePickerStep = existing ? 2 : 1;
      state.sitePickerSiteCode = existing || '';
      state.pickerPending = existing ? { siteCode: existing, zoneCode: state.createForm.zoneCode || '' } : null;
    }
    // v33.0 — WBS: default current L1 pill to the L1 of committed L3 (if any)
    if(state.showPicker === 'wbs'){
      const existing = state.createForm.wbsL3Code;
      state.wbsPickerL1 = existing ? existing.split('.')[0] : CT_WBS[0].l1;
      state.pickerPending = existing ? { wbsL3Code: existing } : null;
    }
    render();
    return;
  }
  // v24.0 — Picker close
  const pkClose = target.closest('[data-picker-close]');
  if(pkClose){
    state.showPicker = null;
    state.pickerPending = null;
    state.pickerSearch = '';
    state.sitePickerStep = 1;
    state.sitePickerSiteCode = '';
    render();
    return;
  }
  // v25.0 — Search clear
  const pkSearchClear = target.closest('[data-pk-search-clear]');
  if(pkSearchClear){
    state.pickerSearch = '';
    render();
    setTimeout(() => {
      const el = document.getElementById('pk-search-input');
      if(el) el.focus();
    }, 30);
    return;
  }
  // v27.0 — Project selected pill clear
  const pkProjectClear = target.closest('[data-pk-project-clear]');
  if(pkProjectClear){
    state.createForm.projectId = '';
    state.pickerPending = null;
    render();
    return;
  }
  // v29.0 — Project dropdown backdrop tap = close dropdown
  const pkDdClose = target.closest('[data-pk-dd-close]');
  if(pkDdClose){
    state.showPicker = null;
    state.pickerPending = null;
    state.pickerSearch = '';
    state.sitePickerStep = 1;
    state.sitePickerSiteCode = '';
    render();
    return;
  }
  // v29.0 — Project dropdown item selected · immediate commit + close
  const pkProjectSelect = target.closest('[data-pk-project-select]');
  if(pkProjectSelect){
    state.createForm.projectId = pkProjectSelect.dataset.pkProjectSelect;
    state.showPicker = null;
    state.pickerPending = null;
    state.pickerSearch = '';
    render();
    return;
  }
  // v26.0 — Project filter chip
  const pkPfilter = target.closest('[data-pk-pfilter]');
  if(pkPfilter){
    state.projectFilter = pkPfilter.dataset.pkPfilter;
    render();
    return;
  }
  // v25.0 — Project pick
  const pkProject = target.closest('[data-pk-project]');
  if(pkProject){
    state.pickerPending = { projectId: pkProject.dataset.pkProject };
    render();
    return;
  }
  // v25.0 — Site collapse toggle
  const pkSiteToggle = target.closest('[data-pk-site-toggle]');
  if(pkSiteToggle){
    const code = pkSiteToggle.dataset.pkSiteToggle;
    state.siteCollapse[code] = !state.siteCollapse[code];
    render();
    return;
  }
  // v25.0 — WBS L1 collapse toggle
  const pkWbsToggle = target.closest('[data-pk-wbs-toggle]');
  if(pkWbsToggle){
    const k = pkWbsToggle.dataset.pkWbsToggle;
    state.wbsCollapse[k] = !state.wbsCollapse[k];
    render();
    return;
  }
  // v25.0 — Sort chip
  const pkSort = target.closest('[data-pk-sort]');
  if(pkSort){
    state.pickerSort = pkSort.dataset.pkSort;
    render();
    return;
  }
  // v31.0 — Site/Zone modal: backdrop tap → close
  // Only trigger when tap the backdrop itself (not inside sheet)
  const pkModalBackdrop = target.closest('[data-pk-modal-backdrop]');
  const pkModalStop = target.closest('[data-pk-modal-stop]');
  if(pkModalBackdrop && !pkModalStop){
    state.showPicker = null;
    state.pickerPending = null;
    state.pickerSearch = '';
    render();
    return;
  }
  // v31.0 — Site/Zone modal: tap site pill → switch site (reset pending zone)
  const pkModalSite = target.closest('[data-pk-modal-site]');
  if(pkModalSite){
    const siteCode = pkModalSite.dataset.pkModalSite;
    // Preserve zone if it belongs to this site AND was already picked
    const existingZone = (state.createForm.siteCode === siteCode) ? state.createForm.zoneCode : '';
    state.pickerPending = { siteCode, zoneCode: existingZone };
    state.pickerSearch = '';
    render();
    return;
  }
  // v31.0 — Site/Zone modal: tap zone row → set pending
  const pkModalZone = target.closest('[data-pk-modal-zone]');
  if(pkModalZone){
    const [siteCode, zoneCode] = pkModalZone.dataset.pkModalZone.split('|');
    state.pickerPending = { siteCode, zoneCode };
    render();
    return;
  }
  // v33.0 — WBS modal: tap L1 pill → switch current L1 (clear search)
  const pkWbsmL1 = target.closest('[data-pk-wbsm-l1]');
  if(pkWbsmL1){
    state.wbsPickerL1 = pkWbsmL1.dataset.pkWbsmL1;
    state.pickerSearch = '';
    render();
    return;
  }
  // v33.0 — WBS modal: tap L3 row → set pending
  const pkWbsmL3 = target.closest('[data-pk-wbsm-l3]');
  if(pkWbsmL3){
    state.pickerPending = { wbsL3Code: pkWbsmL3.dataset.pkWbsmL3 };
    render();
    return;
  }
  // v30.0 — Site/Zone picker: Step 1 tap site → move to Step 2
  const pkSiteStep1 = target.closest('[data-pk-site-step1]');
  if(pkSiteStep1){
    const siteCode = pkSiteStep1.dataset.pkSiteStep1;
    state.sitePickerSiteCode = siteCode;
    state.sitePickerStep = 2;
    state.pickerPending = { siteCode: siteCode, zoneCode: '' };
    state.pickerSearch = '';
    render();
    return;
  }
  // v30.0 — Site/Zone picker: back from Step 2 → Step 1
  const pkSiteBack = target.closest('[data-pk-site-backstep]');
  if(pkSiteBack){
    state.sitePickerStep = 1;
    state.sitePickerSiteCode = '';
    state.pickerPending = null;
    state.pickerSearch = '';
    render();
    return;
  }
  // v30.0 — Site/Zone picker: Step 2 tap zone → set pending (needs confirm)
  const pkZoneStep2 = target.closest('[data-pk-zone-step2]');
  if(pkZoneStep2){
    const [siteCode, zoneCode] = pkZoneStep2.dataset.pkZoneStep2.split('|');
    state.pickerPending = { siteCode, zoneCode };
    render();
    return;
  }
  // v24.0 — Picker: Site/Zone select (legacy · kept for safety)
  const pkZone = target.closest('[data-pk-zone]');
  if(pkZone){
    const [siteCode, zoneCode] = pkZone.dataset.pkZone.split('|');
    state.pickerPending = { siteCode, zoneCode };
    render();
    return;
  }
  // v24.0 — Picker: WBS select
  const pkWbs = target.closest('[data-pk-wbs]');
  if(pkWbs){
    state.pickerPending = { wbsL3Code: pkWbs.dataset.pkWbs };
    render();
    return;
  }
  // v24.0 — Picker: Person select
  const pkPerson = target.closest('[data-pk-person]');
  if(pkPerson){
    const [role, email] = pkPerson.dataset.pkPerson.split('|');
    state.pickerPending = { email, role };
    render();
    return;
  }
  // v24.0 — Picker confirm
  const pkConfirm = target.closest('[data-picker-confirm]');
  if(pkConfirm){
    const kind = pkConfirm.dataset.pickerConfirm;
    const p = state.pickerPending || {};
    if(kind === 'project' && p.projectId){
      state.createForm.projectId = p.projectId;
    } else if(kind === 'site' && p.siteCode && p.zoneCode){
      state.createForm.siteCode = p.siteCode;
      state.createForm.zoneCode = p.zoneCode;
    } else if(kind === 'wbs' && p.wbsL3Code){
      state.createForm.wbsL3Code = p.wbsL3Code;
    } else if(kind === 'inspector' && p.email){
      state.createForm.inspectorEmail = p.email;
    } else if(kind === 'approver' && p.email){
      state.createForm.approverEmail = p.email;
    }
    state.showPicker = null;
    state.pickerPending = null;
    state.pickerSearch = '';
    render();
    return;
  }

  // v13.0 — Stepper dot click (jump to item)
  const ckwJump = target.closest('[data-ckw-jump]');
  if(ckwJump){
    ckwSyncComment();
    state.cklIdx = parseInt(ckwJump.dataset.ckwJump);
    render();
    return;
  }

  // v13.0/v21.0 — Wizard nav (prev / next / submit · with section hop)
  const ckwNav = target.closest('[data-ckw-nav]');
  if(ckwNav){
    const nav = ckwNav.dataset.ckwNav;
    ckwSyncComment();
    // Recompute section boundaries from state.currentItemCode context
    const _byCode = (window.__ALL_ITEMS_CACHE || []);
    // Rebuild grouping locally to know section sizes
    const _SECTIONS = [];
    const _map = {};
    (state._lastAllItems || []).forEach(it => {
      if(!(it.sec in _map)){ _map[it.sec] = _SECTIONS.length; _SECTIONS.push({key:it.sec, items:[]}); }
      _SECTIONS[_map[it.sec]].items.push(it);
    });
    const secLens = _SECTIONS.length ? _SECTIONS.map(s => s.items.length) : [4, 3];
    const secCount = secLens.length;
    if(nav === 'prev'){
      if(state.cklIdx > 0) state.cklIdx -= 1;
      else if((state.ckSectionIdx||0) > 0){
        state.ckSectionIdx -= 1;
        state.cklIdx = (secLens[state.ckSectionIdx] || 1) - 1;
      }
      render();
    } else if(nav === 'next'){
      const curLen = secLens[state.ckSectionIdx || 0] || 1;
      if((state.cklIdx || 0) < curLen - 1){
        state.cklIdx = (state.cklIdx || 0) + 1;
      } else if((state.ckSectionIdx || 0) < secCount - 1){
        state.ckSectionIdx += 1;
        state.cklIdx = 0;
      }
      render();
    } else if(nav === 'submit'){
      showToast(L('ส่งผลการตรวจเรียบร้อย · เปิดหน้าเซ็นรับรอง','Inspection submitted · opening signature'));
      setTimeout(() => {
        showToast(L('Task → REVIEW · ส่งให้ QC Manager แล้ว','Task → REVIEW · sent to QC Manager'));
        setTimeout(() => {
          // Reset wizard state + go to list
          state.cklSet = {};
          state.cklComments = {};
          state.cklIdx = 0;
          state.ckSectionIdx = 0;
          state.history = [];
          navigate('list');
        }, 1500);
      }, 1800);
    }
    return;
  }

  // v6.0 — Chip picker (sev/cat) inside Create-NCR form
  const chipPick = target.closest('.chip-pick button');
  if(chipPick){
    const group = chipPick.closest('.chip-pick');
    const key = group.dataset.pick;
    const val = chipPick.dataset.val;
    if(!state.nForm) state.nForm = {};
    state.nForm[key] = val;
    if(key === 'sev'){
      // Update default due date + stop-work toggle when sev changes
      state.nForm.due = computeDueDate(val);
      state.nForm.stopWork = (val === 'crit');
    }
    // Sync inputs before re-render
    const inputs = ['nf-title','nf-desc','nf-root','nf-corr'];
    inputs.forEach(id => { const el = document.getElementById(id); if(el){ const key = id === 'nf-title' ? 'title' : id === 'nf-desc' ? 'desc' : id === 'nf-root' ? 'rootCause' : 'corrective'; state.nForm[key] = el.value; } });
    render();
    return;
  }

  // Priority pick on Create Task
  const prio = target.closest('[data-prio]');
  if(prio){
    document.querySelectorAll('.prio-pick button').forEach(b => b.classList.remove('on'));
    prio.classList.add('on');
    return;
  }
});

function backNav(){
  back();
}

/* Init */
render();
</script>
</body>
</html>